Verhindern, dass eine Webseite aus der Navigation entfernt mit JavaScript
-
03-07-2019 - |
Frage
Wie eine Webseite verhindern, dass die Navigation weg mit Hilfe von JavaScript?
Lösung
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
Andere Tipps
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.
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:
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;
}
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
Das entspricht die akzeptierte Antwort in jQuery 1.11:
$(window).on("beforeunload", function () {
return "Please don't leave me!";
});
altCognito Antwort verwendet, um das unload
Ereignis, das zu spät geschieht für JavaScript, um die Navigation zu beenden.
Verwenden Sie onunload .
Für jQuery, ich glaube, das funktioniert wie folgt:
$(window).unload(function() {
alert("Unloading");
return falseIfYouWantToButBeCareful();
});
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“
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.