Manchmal kommt es vor, dass ein Frontend-Developer den User benachrichtigen will, falls er die aktuelle Seite verlassen will. Ein Szenario wäre ein Fomular Eingabe mit einem Hinweis, dass alle Daten verloren gehen falls er die Seite verlässt.
Mithilfe des onbeforeunload Events kann das verhindert werden. Dazu weist man dem Event eine Funktion zu, die in unserem Fall den User entscheiden lassen soll, ob er die Seite wirklich verlassen will.
window.onbeforeunload = function() {
return confirm('Wollen sie die Seite wirklich verlassen?');
}Damit ist wir eigentlich auch schon fertig. Jetzt können wir das noch verfeinern, sodass bei Formular Submits die Meldung nicht anzeigt wird. Dazu benutzen wir einfachheitshalber jQuery. Bei jedem Submit wird das onbeforeunload Event unterbunden. Das ganze sieht dann so aus:
$('form').submit(function() {
window.onbeforeunload = null;
});
window.onbeforeunload = function() {
return confirm('Wollen sie die Seite wirklich verlassen?');
}Das ganze kann dann doch beliebig erweitert werden. Man könnte noch interne und externe Links erlauben oder verhindern je nachdem was man braucht.
Es sollte aber bedacht werden, dass man das nur in Ausnahmefällen einsetzen sollte, da viele User so etwas als störend empfinden könnte.