Zapobiegaj opuszczaniu strony internetowej za pomocą JavaScript

Jak zapobiec opuszczaniu strony internetowej za pomocą JavaScript?

Używanie onunloadpozwala na wyświetlanie komunikatów, ale nie przerywa nawigacji (bo jest już za późno). Jednak użycie onbeforeunloadspowoduje przerwanie nawigacji:

window.onbeforeunload = function() {
  return "";
}

Uwaga: zwracany jest pusty ciąg, ponieważ nowsze przeglądarki wyświetlają komunikat, taki jak „Wszelkie niezapisane zmiany zostaną utracone”, którego nie można zastąpić.

W starszych przeglądarkach można określić komunikat do wyświetlenia w monicie:

window.onbeforeunload = function() {
  return "Are you sure you want to navigate away?";
}

W przeciwieństwie do innych przedstawionych tutaj metod, ten fragment kodu nie będzie spowoduje, że przeglądarka wyświetli ostrzeżenie z pytaniem, czy użytkownik chce wyjść; zamiast tego wykorzystuje zdarzeniową naturę DOM do przekierowania z powrotem do bieżącej strony (i tym samym anulowania nawigacji), zanim przeglądarka będzie miała szansę wyładować go z pamięci.

Ponieważ działa poprzez bezpośrednie zwieranie nawigacji, nie można go używać do zapobiegania zamknięciu strony; jednak można go użyć do wyłączenia funkcji omijania ramek.

(function () {
    var location = window.document.location;

    var preventNavigation = function () {
        var originalHashValue = location.hash;

        window.setTimeout(function () {
            location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
            location.hash = originalHashValue;
        }, 0);
    };

    window.addEventListener('beforeunload', preventNavigation, false);
    window.addEventListener('unload', preventNavigation, false);
})();

Zastrzeżenie: Nigdy nie powinieneś tego robić. Jeśli strona zawiera kod niszczący ramki, uszanuj życzenia autora.

Skończyło się na tej nieco innej wersji:

var dirty = false;
window.onbeforeunload = function() {
    return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}

W innym miejscu ustawiam flagę dirty na true, gdy formularz jest zanieczyszczony (lub w inny sposób chcę uniemożliwić nawigację). Dzięki temu mogę łatwo kontrolować, czy użytkownik otrzyma monit Potwierdź nawigację.

Wraz z tekstem w wybranej odpowiedzi zobaczysz zbędne monity:

Odpowiednik w bardziej nowoczesny i zgodny z przeglądarkami sposób, przy użyciu nowoczesnych interfejsów API addEventListener.

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

Źródło: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

W przykładzie Aymana zwracając wartość false, zapobiegasz zamknięciu okna / karty przeglądarki.

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}

Odpowiednik zaakceptowanej odpowiedzi w jQuery 1.11:

$(window).on("beforeunload", function () {
    return "Please don't leave me!";
});

Przykład JSFiddle

Odpowiedź altCognito wykorzystała unloadzdarzenie, które następuje za późno, aby JavaScript przerwał nawigację.

Użyj onunload .

Myślę, że w przypadku jQuery działa to tak:

$(window).unload(function() { 
  alert("Unloading"); 
  return falseIfYouWantToButBeCareful();
});

Ten sugerowany komunikat o błędzie może powielić komunikat o błędzie, który jest już wyświetlany w przeglądarce. W chrome, 2 podobne komunikaty o błędach są wyświetlane jeden po drugim w tym samym oknie.

W chrome tekst wyświetlany po niestandardowej wiadomości to: „Czy na pewno chcesz opuścić tę stronę?”. W przeglądarce Firefox w ogóle nie wyświetla naszego niestandardowego komunikatu o błędzie (ale nadal wyświetla okno dialogowe).

Bardziej odpowiednim komunikatem o błędzie może być:

window.onbeforeunload = function() {
    return "If you leave this page, you will lose any unsaved changes.";
}

Lub styl stackoverflow: „Zacząłeś pisać lub edytować post”.

Jeśli łapiesz przycisk wstecz / dalej w przeglądarce i nie chcesz opuszczać przeglądarki, możesz użyć:

window.addEventListener('popstate', function() {
    if (window.location.origin !== 'http://example.com') {
        // Do something if not your domain
    } else if (window.location.href === 'http://example.com/sign-in/step-1') {
        window.history.go(2); // Skip the already-signed-in pages if the forward button was clicked
    } else if (window.location.href === 'http://example.com/sign-in/step-2') {
        window.history.go(-2); // Skip the already-signed-in pages if the back button was clicked
    } else {
        // Let it do its thing
    }
});

W przeciwnym razie możesz użyć zdarzenia beforeunload , ale komunikat może, ale nie musi, działać w różnych przeglądarkach i wymaga zwrócenia czegoś, co wymusza wbudowany monit.