Bei der Webentwicklung verwenden wir häufig das Ereignis zum Schließen der Seite onbeforeunload, das Benutzern die Möglichkeit geben kann, das Schließen aufzugeben, wie z. B. dieser Blog-Editor. Wenn sich der Benutzer zum Verlassen entscheidet, wird natürlich das Onunload-Ereignis ausgelöst. Wenn der Benutzer jedoch abbrechen möchte, wie erkennt man dies?
Wir gehen davon aus, dass eine Seite ein Abbruchereignis namens onunloadcancel hinterlässt. Offensichtlich sollte dieses Ereignis ausgelöst werden, nachdem der Benutzer auf die Schaltfläche „Abbrechen“ des Dialogs geklickt hat. Der Auslösevorgang zum Schließen des Eingabeaufforderungsdialogfelds ist jedoch nicht so einfach. Sehen wir uns zunächst den Prozess an:
Kopieren Sie den Codecode wie folgt:
window.onbeforeunload = function()
{
return „Wirklich verlassen?“;
}
Wenn der Benutzer bereit ist, die Seite zu verlassen (z. B. durch Drücken der Schaltfläche „Schließen“ oder Aktualisieren der Seite usw.), wird das Ereignis „onbeforeunload“ ausgelöst. Unser Skript kann nicht entscheiden, ob die Seite in diesem Fall geschlossen werden soll. Die einzige Möglichkeit besteht darin, eine Zeichenfolge zurückzugeben. Diese Zeichenfolge wird nur als erläuternder Text im Dialogfeld „Schließen“ angezeigt . Aber für welches wir uns entscheiden sollen, wissen wir nicht.
Wenn wir dieses Problem jedoch sorgfältig analysieren, ist dies tatsächlich nicht der Fall. Wenn der Benutzer sich wirklich dafür entscheidet, die Seite zu schließen, wird der gesamte laufende Code gelöscht. Wenn der Benutzer weiterhin auf der Seite bleibt, wird sie so behandelt, als ob nichts passiert wäre, außer dem onbeforeunload-Ereignis. Deshalb machen wir einen kleinen Trick im onbeforeunload-Event und registrieren hier einen Timer, der nach ein paar Millisekunden startet. Wenn die Seite wirklich geschlossen ist, dann ist der Timer natürlich immer noch da, und die Verzögerung von einigen Millisekunden. Bei diesem inhärent asynchronen Schnittstelleninteraktionsereignis liegt kein Fehler vor.
Kopieren Sie den Codecode wie folgt:
<script language="JavaScript">
window.onbeforeunload = function()
{
setTimeout(onunloadcancel, 10);
return „Wirklich verlassen?“;
}
window.onunloadcancel = function()
{
Alert("Verlassen abbrechen");
}
</script>
Wir verwenden setTimeout und verzögern 10 ms, um onunloadcancel auszuführen. Wenn die Seite wirklich geschlossen ist, werden die Timer natürlich zerstört, andernfalls fahren Sie fort. Beim Testen wurde jedoch festgestellt, dass FireFox zwei Fehler aufwies:
Wenn die Schaltfläche „Schließen“ gedrückt wird, wird manchmal auch „onunloadcancel“ ausgeführt und ein Dialogfeld blinkt auf. Wenn Sie zu while(1); wechseln, bleibt der Browser hängen, was bedeutet, dass onunloadcancel zwar ausgeführt wird, aber nur die Schnittstelle zerstört, aber die Ausführung des Skripts nicht anhält.
Wenn Sie die Seite durch Aktualisieren verlassen, wird onbeforeunload nur einmal ausgeführt. Wenn Sie jedoch auf die Schaltfläche „X“ klicken, um die Seite zu schließen, wird onbeforeunload zweimal ausgeführt. Daher müssen wir es noch verbessern, um es mit FF kompatibel zu machen.
Kopieren Sie den Codecode wie folgt:
<script language="JavaScript">
var_t;
window.onbeforeunload = function()
{
setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
return „Wirklich verlassen?“;
}
window.onunloadcancel = function()
{
clearTimeout(_t);
Alert("Verlassen abbrechen");
}
</script>
Hier wird eine Methode verwendet, deren Grund ich nicht erklären kann. Sie sollte als Hack zur Behebung des Fehlers in FF angesehen werden.