Window: unload-Ereignis
Warnung: Entwickler sollten die Verwendung dieses Ereignisses vermeiden. Siehe "Hinweise zur Verwendung" unten.
Das unload-Ereignis wird ausgelöst, wenn das Dokument oder eine untergeordnete Ressource entladen wird.
Es wird nach folgenden Ereignissen ausgelöst:
beforeunload(abbrechbares Ereignis)pagehide
Das Dokument befindet sich in folgendem Zustand:
- Alle Ressourcen existieren noch (img, iframe etc.)
- Für den Endbenutzer ist nichts mehr sichtbar
- Benutzeroberflächen-Interaktionen sind unwirksam (
window.open,alert,confirm, etc.) - Ein Fehler stoppt den Entladevorgang nicht
Bitte beachten Sie, dass das unload-Ereignis auch dem Dokumentbaum folgt: Das Entladen des übergeordneten Rahmens erfolgt vor dem unload des untergeordneten Rahmens (siehe Beispiel unten).
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("unload", (event) => { })
onunload = (event) => { }
Ereignistyp
Ein generisches Event.
Ereignis-Handler-Aliase
Zusätzlich zur Window-Schnittstelle ist die Ereignis-Handler-Eigenschaft onunload auch für die folgenden Ziele verfügbar:
Hinweise zur Verwendung
Entwickler sollten die Verwendung dieses Ereignisses vermeiden.
Insbesondere auf mobilen Geräten wird das unload-Ereignis nicht zuverlässig ausgelöst. Das unload-Ereignis wird zum Beispiel in folgendem Szenario überhaupt nicht ausgelöst:
- Ein mobiler Benutzer besucht Ihre Seite.
- Der Benutzer wechselt dann zu einer anderen App.
- Später schließt der Benutzer den Browser über den App-Manager.
Das unload-Ereignis ist auch nicht mit dem Back/Forward Cache (bfcache) kompatibel, da viele Seiten, die dieses Ereignis verwenden, davon ausgehen, dass die Seite nicht weiter existieren wird, nachdem das Ereignis ausgelöst wurde. Um dem entgegenzuwirken, platzieren einige Browser (wie Firefox) Seiten nicht im bfcache, wenn sie unload-Listener haben, was schlecht für die Leistung ist. Andere, wie Chrome, lösen das unload-Ereignis nicht aus, wenn ein Benutzer die Seite verlässt.
Das beste Ereignis, um das Ende einer Benutzersitzung zu signalisieren, ist das visibilitychange-Ereignis. In Browsern, die visibilitychange nicht unterstützen, ist die nächstbeste Alternative das pagehide-Ereignis, das zwar auch nicht zuverlässig ausgelöst wird, aber bfcache-kompatibel ist.
Wenn Sie speziell versuchen, Entladeereignisse der Seite zu erkennen, sollten Sie am besten auf das pagehide-Ereignis hören.
Weitere Informationen zu den Problemen im Zusammenhang mit dem unload-Ereignis finden Sie im Page Lifecycle API Leitfaden.
Beispiele
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Parent Frame</title>
<script>
window.addEventListener("beforeunload", (event) => {
console.log("I am the 1st one.");
});
window.addEventListener("unload", (event) => {
console.log("I am the 3rd one.");
});
</script>
</head>
<body>
<iframe src="child-frame.html"></iframe>
</body>
</html>
Unten, der Inhalt von child-frame.html:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Child Frame</title>
<script>
window.addEventListener("beforeunload", (event) => {
console.log("I am the 2nd one.");
});
window.addEventListener("unload", (event) => {
console.log("I am the 4th and last one…");
});
</script>
</head>
<body>
☻
</body>
</html>
Wenn der übergeordnete Rahmen entladen wird, werden die Ereignisse in der Reihenfolge ausgelöst, die durch die console.log()-Nachrichten beschrieben wird.
Spezifikationen
| Specification |
|---|
| HTML # event-unload |
| HTML # handler-window-onunload |
Browser-Kompatibilität
Siehe auch
- Verwandte Ereignisse:
DOMContentLoaded,readystatechange,load - Entladen von Dokumenten — Entladen eines Dokuments
- Das
visibilitychange-Ereignis. - Verlieren Sie nicht den Benutzer- und App-Zustand, verwenden Sie die Sichtbarkeit der Seite erklärt im Detail, warum Sie
visibilitychangeund nichtbeforeunload/unloadverwenden sollten. - Page Lifecycle API gibt Leitlinien für bewährte Praktiken zum Umgang mit dem Seitenlebenszyklusverhalten in Ihren Webanwendungen.
- PageLifecycle.js: eine JavaScript-Bibliothek, die sich mit inkonsistenten Seitenlebenszyklusverhalten zwischen den Browsern befasst.
- Back/Forward Cache erklärt, was der Back/Forward Cache ist und seine Auswirkungen auf verschiedene Seitenlebenszyklusereignisse.