JavaScript przed opuszczeniem strony

233

Chcę potwierdzić, zanim użytkownik opuści stronę. Jeśli powie „ok”, przekieruje na nową stronę lub anuluje opuszczenie strony. Próbowałem to zrobić przy nieobciążeniu

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

Ale to potwierdza po zamknięciu strony? Jak to zrobić poprawnie?

Byłoby jeszcze lepiej, gdyby ktoś pokazał, jak to zrobić za pomocą jQuery?

javascript jquery kd7
źródło
1
ha ha ha ... Tak, to całkiem right..but szczęście to nie moja strona ... mój klient z prośbą, aby zrobić to na boku
KD7
25
Tak, ale naprawdę cieszę się z tych alertów, gdy mam zamiar zamknąć niezapisaną stronę Gmaila.
Etdashou,
Uwaga: w przeglądarce Firefox 4+ wyświetlana jest tylko domyślna wiadomość zamiast wiadomości niestandardowej developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes
baptx
4
Możliwy duplikat ostrzeżenia użytkownika przed opuszczeniem strony internetowej z niezapisanymi zmianami
Wasim A.

Odpowiedzi:

352

onunload(lub onbeforeunload) nie może przekierować użytkownika na inną stronę. Jest to ze względów bezpieczeństwa.

Jeśli chcesz wyświetlić monit, zanim użytkownik opuści stronę, użyj onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Lub z jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

To tylko zapyta użytkownika, czy chce opuścić stronę, czy nie, nie możesz przekierować go, jeśli zdecyduje się pozostać na stronie. Jeśli zdecydują się odejść, przeglądarka przejdzie tam, gdzie kazali.

Możesz użyć onunloaddo zrobienia rzeczy przed rozładowaniem strony, ale nie możesz przekierować stamtąd (Chrome 14+ blokuje alerty wewnątrz onunload):

window.onunload = function() {
    alert('Bye.');
}

Lub z jQuery:

$(window).unload(function(){
  alert('Bye.');
});
Rakieta Hazmat
źródło
12
@Joseph: Kiedy zwracasz ciąg znaków onbeforeunload, przeglądarka umieszcza go w swoim własnym polu potwierdzenia. Korzystanie confirmjest bezużyteczne w, onunloada onbeforeunloadponieważ tylko przeglądarka może kontrolować, dokąd idzie, a nie ty. Sprawdź to demo: jsfiddle.net/3kvAC
Rocket Hazmat
7
Tylko uwaga, jeśli chcesz warunkowo wyświetlić wiadomość onbeforeunload, return falsespowoduje, że przeglądarka pokaże „fałsz” w oknie dialogowym. Musisz, return undefinedjeśli chcesz, aby okno zamknęło się bez powiadomienia użytkownika.
Dan Fitch,
5
@Adam: Firefox postanowił zabronić dostosowywania tej wiadomości. Jest to część przeglądarki, więc nie można zastąpić tego zachowania. Inne przeglądarki mogą również usuwać możliwość dostosowywania wiadomości. Zobacz: developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…
Rocket Hazmat
8
@RocketHazmat Chrome też. Teraz mówi tylko: Czy chcesz opuścić tę stronę? Wprowadzone zmiany mogą nie zostać zapisane.
programmer5000
6
@ programmer5000 To dobrze, ponieważ niektóre złośliwe strony internetowe mogą wyświetlać niektóre bezużyteczne ostrzeżenia (na przykład „Nie możesz wyjść bez podania informacji bankowych”)
Naman
34

Ten kod, gdy wykryjesz również stan formularza zmieniony lub nie.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Możesz użyć funkcji Google Serialize formularza JQuery, która zbierze wszystkie dane wejściowe formularza i zapisze je w tablicy. Myślę, że to wyjaśnienie wystarczy :)

Wasim A.
źródło
jakiś pomysł, dlaczego to nie zadziała? Czy może zostać zastąpione przez inne funkcje js / wtyczki jquery? Korzystam z aplikacji webrtc i chciałbym „zamknąć” niektóre rzeczy, gdy klient zamyka okno, a zatem trzeba obsługiwać okno zamknięte.
hej,
1
może to zostać nadpisane przez dowolną inną wtyczkę itp., głównie programista pomylił się z selektorem, jeśli masz wątpliwości co do nadpisania, wstaw kod jquery przed zamknięciem znacznika </body>.
Wasim A.,
Tak ... jeśli masz kod JS, który ukrywa lub dezaktywuje pola wprowadzania po załadowaniu strony, wtedy podczas sprawdzania w celu porównania ukrytych \ wyłączonych pól nie będzie serializowany. Kontrola oczywiście się nie powiedzie. ;) Jest to obejście: stackoverflow.com/a/4748748/114029
Leniel Maccaferri
Nawiasem mówiąc ... tutaj jest lepszy sposób: stackoverflow.com/q/16322042/114029
Leniel Maccaferri
1
należy zauważyć, że spowoduje to również pojawienie się ostrzeżenia po naciśnięciu przycisku przesyłania. można ponownie serializować formularz po kliknięciu przycisku Prześlij, aby temu zapobiec.
Adam
19

Powiadomi Cię o opuszczeniu bieżącej strony

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>
Ajit Singh
źródło
13

To, co zrobiłem, aby wyświetlić komunikat potwierdzający właśnie wtedy, gdy mam niezapisane dane

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

powrót „niezdefiniowany” spowoduje wyłączenie potwierdzenia

Uwaga: zwracanie „null” nie będzie działać z IE

Możesz także użyć „niezdefiniowany”, aby wyłączyć potwierdzenie

window.onbeforeunload = undefined;
Mina Matta
źródło
11

Aby mieć popop z Chrome 14+, musisz wykonać następujące czynności:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

Użytkownik zostanie zapytany, czy chce zostać czy odejść.

David Bélanger
źródło
Wiesz, dlaczego to nie działa? Używam chrome (najnowsza wersja) wraz z mnóstwem wtyczek jquery, ale nie dostaję żadnego ostrzeżenia, kiedy zamykam okno.
hej,
@hey Dlaczego głosowanie w dół? Działa .... Musisz upewnić się, że jest poza jQuery(document)i sugeruję, aby umieścić go zaraz po załadowaniu wszystkich wtyczek. Ponadto ten fragment kodu nie ostrzega ... to tylko wersja demonstracyjna return.
David Bélanger,
7

Możesz użyć poniższej linijki, aby zawsze pytać użytkownika przed opuszczeniem strony.

window.onbeforeunload = s => "";

Aby zapytać użytkownika, kiedy coś na stronie zostało zmodyfikowane, zapoznaj się z tą odpowiedzią .

spencer.sm
źródło
czy to też się uruchomi, jeśli odświeżę stronę lub po prostu wyjdę?
Si8
Tak, uruchomi się przy odświeżeniu lub wyjściu.
spencer.sm
Czy w ogóle można wiedzieć, kiedy jest to odświeżanie, a kiedy po raz pierwszy?
Si8
Gdy użytkownik pojawia się na stronie po raz pierwszy, w przeciwieństwie do odświeżania strony.
Si8
O nie. Nie będzie uruchamiany, gdy użytkownik wejdzie na stronę po raz pierwszy. Tylko podczas zamykania lub zmiany stron lub odświeżania.
spencer.sm
4

Zwykle chcesz wyświetlić tę wiadomość, gdy użytkownik wprowadził zmiany w formularzu, ale nie są one zapisywane.

Zastosuj to podejście, aby wyświetlić komunikat tylko wtedy, gdy użytkownik coś zmienił

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}
Simon Franzen
źródło
3 
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

Emir Mamashov
źródło
1

Tylko trochę bardziej pomocny, włącz i wyłącz

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');
L2aelba
źródło
1

Większość rozwiązań tutaj nie działała dla mnie, więc skorzystałem z tego znalezionego tutaj

Dodałem również zmienną, aby zezwolić na pole potwierdzenia lub nie

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});
Raj Sharma
źródło