Verhindern, dass eine Webseite aus der Navigation entfernt mit JavaScript

Question

Wie eine Webseite verhindern, dass die Navigation weg mit Hilfe von JavaScript?

Answer 1

Mit onunload nur können Sie Nachrichten angezeigt werden, aber es wird die Navigation nicht unterbrechen (weil es zu spät ist). Sie können jedoch onbeforeunload verwenden, und es wird die Navigation unterbrechen:

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

Bearbeiten :. Removed confirm() in return-Anweisung, da dies ein Bestätigungsfenster verursacht wie erwartet, aber auch einen zweiten bestätigen, mit dem Ergebnis des ersten confirm zeigte

Answer 2

Im Gegensatz zu anderen hier vorgestellten Methoden, dieses Stück Code wird nicht bewirken, dass der Browser eine Warnung angezeigt wird der Benutzer zu fragen, ob er gehen will; sondern es nutzt die evented Natur des DOM auf die aktuelle Seite zu umleiten zurück (und damit abbrechen Navigation), bevor der Browser eine Chance hat, zu entladen, es aus dem Speicher.

Da funktioniert es durch einen Kurzschluss Navigation direkt, kann sie nicht verwendet werden, um die Seite zu verhindern, geschlossen ist; jedoch kann es verwendet werden Frame-Busting zu deaktivieren.

(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);
})();

Hinweis: Sie sollten dies nie tun. Wenn eine Seite Rahmen sprengenden Code auf sie hat, bitte die Wünsche des Autors respektieren.

Answer 3

ich mit diesem etwas anderen Version endete:

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

An anderer Stelle habe ich die schmutzige Flagge auf true, wenn das Formular dirtied wird (oder ich möchte sonst die Navigation weg verhindern). Dies ermöglicht es mir leicht zu kontrollieren, ob der Benutzer die Bestätigungs Navigation Prompt wird.

Mit dem Text in der ausgewählten Antwort sehen Sie redundante Anweisungen:

Answer 4

In Ayman dem Beispiel durch falsche Rückkehr Sie das Browser-Fenster / Tab das Schließen verhindern.

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

Answer 5

Das äquivalent in einer moderneren und Browser kompatibel Art und Weise, mit modern addEventListener APIs.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;              // Gecko and WebKit
});

Quelle: https://developer.mozilla.org/en- US / docs / Web / Events / beforeunload

Answer 6

Das entspricht die akzeptierte Antwort in jQuery 1.11:

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

JSFiddle Beispiel

altCognito Antwort verwendet, um das unload Ereignis, das zu spät geschieht für JavaScript, um die Navigation zu beenden.

Answer 7

Verwenden Sie onunload .

Für jQuery, ich glaube, das funktioniert wie folgt:

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

Answer 8

Die vorgeschlagene Fehlermeldung der Fehlermeldung duplizieren kann der Browser bereits anzeigt. In Chrom, die 2 ähnlichen Fehlermeldungen nacheinander im selben Fenster angezeigt.

In Chrom, der Text nach der benutzerdefinierten Meldung angezeigt wird: „Sind Sie sicher, dass Sie diese Seite verlassen?“. In Firefox, ist es nicht unsere eigene Fehlermeldung überhaupt angezeigt werden (aber zeigt noch den Dialog).

Eine entsprechende Fehlermeldung könnte sein:

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

oder Stackoverflow-Stil: „Sie haben damit begonnen, zu schreiben oder einen Beitrag Bearbeitung“

Answer 9

Wenn Sie fangen einen Browser vor / zurück Taste und wollen nicht weg navigieren, können Sie:

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
    }
});

Sie können die beforeunload Ereignis, aber die Nachricht kann oder auch nicht funktionieren Cross-Browser und erfordert Rückkehr etwas, das über eine integrierte in Prompt zwingt.