Window: unload-Event
Warnung: Entwickler sollten die Verwendung dieses Events vermeiden. Siehe "Hinweise zur Verwendung" unten.
Das unload-Event wird ausgelöst, wenn das Dokument oder eine untergeordnete Ressource entladen wird.
Es wird nach folgenden Events ausgelöst:
beforeunload(abbrechbares Event)pagehide
Das Dokument befindet sich in folgendem Zustand:
- Alle Ressourcen existieren noch (img, iframe etc.)
- Nichts ist mehr für den Endbenutzer sichtbar
- UI-Interaktionen sind wirkungslos (
window.open,alert,confirmetc.) - Ein Fehler stoppt den Entladevorgang nicht
Bitte beachten Sie, dass das unload-Event auch dem Dokumentbaum folgt: das Entladen des übergeordneten Frames erfolgt vor dem unload des untergeordneten Frames (siehe Beispiel unten).
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("unload", (event) => { })
onunload = (event) => { }
Eventtyp
Ein generisches Event.
Event-Handler-Aliase
Zusätzlich zur Window-Schnittstelle ist die Ereignis-Handler-Eigenschaft onunload auch auf den folgenden Zielen verfügbar:
Hinweise zur Verwendung
Entwickler sollten die Verwendung dieses Events vermeiden.
Insbesondere auf mobilen Geräten wird das unload-Event nicht zuverlässig ausgelöst. Zum Beispiel wird das unload-Event 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 aus dem App-Manager.
Außerdem ist das unload-Event nicht mit dem Back/Forward-Cache (bfcache) kompatibel, da viele Seiten, die dieses Event verwenden, davon ausgehen, dass die Seite nach dem Event nicht mehr existiert. Um dies zu bekämpfen, platzieren einige Browser (wie Firefox) Seiten nicht im bfcache, wenn sie unload-Listener haben, was schlecht für die Leistung ist. Andere, wie Chrome, werden das unload-Event nicht auslösen, wenn ein Benutzer weg navigiert.
Das beste Ereignis, um das Ende einer Benutzersitzung zu signalisieren, ist das visibilitychange-Event. In Browsern, die visibilitychange nicht unterstützen, ist das nächstbeste alternativ das pagehide-Event, das ebenfalls nicht zuverlässig ausgelöst wird, aber bfcache-kompatibel ist.
Wenn Sie speziell versuchen, Seitenentlade-Ereignisse zu erkennen, ist es am besten, das pagehide-Event zu hören.
Siehe die Page Lifecycle API-Leitfaden für weitere Informationen über die Probleme, die mit dem unload-Event verbunden sind.
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>
Nachfolgend 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 Frame entladen wird, werden die Ereignisse in der durch die console.log()-Nachrichten beschriebenen Reihenfolge ausgelöst.
Spezifikationen
| Spezifikation |
|---|
| HTML # event-unload |
| HTML # handler-window-onunload |
Browser-Kompatibilität
Siehe auch
- Verwandte Events:
DOMContentLoaded,readystatechange,load - Entladen von Dokumenten — ein Dokument entladen
- Das
visibilitychange-Event. - Verlieren Sie nicht den Benutzer- und App-Status, verwenden Sie die Seiten-Sichtbarkeit erklärt im Detail, warum Sie
visibilitychangeund nichtbeforeunload/unloadverwenden sollten. - Page Lifecycle API bietet bewährte Methoden für den Umgang mit dem Seitenlebenszyklus in Ihren Webanwendungen.
- PageLifecycle.js: Eine JavaScript-Bibliothek, die plattformübergreifende Inkonsistenzen im Seitenlebenszyklusverhalten handhabt.
- Back/forward cache erklärt, was der Back/Forward-Cache ist und seine Auswirkungen auf verschiedene Ereignisse im Seitenlebenszyklus.