2012-03-16 13 views
11

Prawdopodobnie powiązany z How to open mailto link in Chrome with Window.open without creating a new tab?mailto link (w chrome) uruchamia window.onbeforeunload - czy mogę temu zapobiec?

Witam wszystkich. Mam stronę formularza gdzie Umieściłem potwierdzić window.onbeforeunload, aby powstrzymać ludzi poruszania się i utraty ich zmiany przez przypadek:

window.onbeforeunload = function(){ 
    if(changed) 
    return "You have unsaved changes. Do you really want to leave this page without saving?"; 
}; 

gdzie changed jest zmienna i ustawiona na wartość true, gdy użytkownik wprowadzi żadnych zmian . Wszystko w porządku. Jednak Dodałem także kilka linków mailto na stronie, tak jak poniżej:

<a class="button button-alt" href="mailto:[email protected]">Report a problem</a> 

Choć mailto nie przechodząc od strony (to otwarcie domyślnego użytkownicy aplikacji poczty), to wciąż wyzwalania Zdarzenie onbeforeunload, monitujące o potwierdzenie, co jest denerwujące. Mogę obejść to ustawienie target="_blank" na łączu, ale wtedy użytkownik pozostaje w pustej zakładce.

Czy mogę ustawić link mailto, aby nie powodował zdarzenia onbeforeunload? Pomyślałem o strasznie hackowatym sposobie robienia tego przez posiadanie kolejnej tymczasowej zmiennej javascript, która powoduje, że onbeforeunload nie daje potwierdzenia, ale wydaje się trochę brudna. Zrobię to mimo, że czekam na odpowiedź, ale czy ktoś ma lepsze rozwiązanie?

Dzięki, max

Odpowiedz

9

budynku off roztworu epascarello w następujący kod jQuery powinno załatwić sprawę:

var ignore_onbeforeunload = false; 
    $('a[href^=mailto]').on('click',function(){ 
     ignore_onbeforeunload = true; 
    }); 

    window.onbeforeunload = function() { 
     if (!ignore_onbeforeunload){ 
      return "Halt! you are not supposed to leave!"; 
     } 
     ignore_onbeforeunload = false; 
    }; 
+0

Wydaje się to o wiele przyjemniejsze - dzięki! –

+0

Naprawdę? odpowiadasz na post 3 lata później?lol Jedyną różnicą jest dodanie onclick z dyskretnym zdarzeniem ... lol – epascarello

+0

Korzysta z jQuery bez powodu, opiera się na zmiennej globalnej. Odpowiedź Johna Kurlaka poniżej jest znacznie przyjemniejsza. Używa ukrytego elementu iframe, całkowicie eliminując potrzebę JavaScript, nie mówiąc już o jQuery. Może następnie samodzielnie zawrzeć poprawkę w pliku szablonu. – mGuv

4

Dodaj flagę i sprawdzić, czy jest on przerzucony ustaw flagę na link kliknięcia.

var ignore = false 
window.onbeforeunload = function() { 
    if (changed && !ignore) { 
     return "You have unsaved changes. Do you really want to leave this page without saving?"; 
    } else { 
     ignore = false; 
    } 
} 

a link

<a class="button button-alt" href="mailto:[email protected]" onclick="ignore=true">Report a problem</a> 

Byłoby lepiej, aby dodać onclick z kodem JavaScript.

+0

Dzięki, tak, właśnie to zrobiłem :) To po prostu wydaje się trochę hacky ... –

+0

@MaxWilliams, co z przeglądarkami, które nie nazywają 'onbeforeunload' na kliknięcie takiego linku? Wygląda na to, że zamknięcie zostanie w tym przypadku pominięte. – Qwertiy

1

Inną opcją, również nieco hacky, ale nieco bardziej ogólny sposób, aby beforeunload ignorować pewne rodzaje łączy:

W beforeunload, sprawdź link, który spowodował beforeunload, a jeśli nie jest to http lub https link, nie zawracaj sobie głowy użytkownikiem.

Niestety, nie jest łatwo sprawdzić link, który spowodował wcześniejszy załadunek, więc jest to miejsce, w którym robi się trochę hacky z handler'em onclick i zmienną globalną.

var lastClicked = null; 
window.onclick = function(e){ 
    e = e || window.event; 
    lastClicked = e.target 
} 
window.onbeforeunload = function(e){ 
    if (changed && lastClicked && lastClicked.href 
     && lastClicked.href.substring(0,4) == 'http') 
     return "You have unsaved changes"; 
} 

Edit: Prawie zapomniałem, odpowiedź ta pochodzi stąd: https://stackoverflow.com/a/12065766/421243

16

bardzo prosty poprawkę do to zrobić coś takiego:

<a href="mailto:[email protected]" target="hidden-iframe">Email me</a> 
<iframe name="hidden-iframe" style="visibility:hidden;position:absolute;"></iframe> 

(I oczywiście, przenieś t on style do własnego arkusza stylów zamiast do ich wstawiania.)

+0

Jestem spóźniony na imprezę, ale natknąłem się na ten sam problem. Jest to zdecydowanie lepsze rozwiązanie. Inni polegają na wielu brzydkich JavaScript/jQuery. W ten sposób możesz samodzielnie rozwiązać poprawkę w szablonie html, używając zerowego kodu JavaScript. – mGuv

+0

Nie działa w systemie iOS10 –

+0

To nie działa w ios. – khizar