Window: unload-Ereignis

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, kann sie bereits aus den relevanten Webstandards entfernt worden sein, befindet sich im Prozess der Entfernung oder wird nur aus Kompatibilitätsgründen beibehalten. Vermeiden Sie die Verwendung und aktualisieren Sie gegebenenfalls bestehenden Code; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu treffen. Beachten Sie, dass diese Funktion jederzeit nicht mehr funktionieren kann.

Warnung: Entwickler sollten die Verwendung dieses Ereignisses vermeiden. Siehe "Hinweise zur Verwendung" unten.

Das unload-Ereignis wird ausgelöst, wenn das Dokument oder eine Kindressource entladen wird.

Es wird nach den folgenden Ereignissen ausgelöst:

Der Zustand des Dokuments ist wie folgt:

  • Alle Ressourcen existieren noch (img, iframe usw.)
  • Nichts ist mehr für den Endbenutzer sichtbar
  • UI-Interaktionen sind unwirksam (window.open, alert, confirm, usw.)
  • Ein Fehler stoppt den Entladevorgang nicht

Bitte beachten Sie, dass das unload-Ereignis auch dem Dokumentbaum folgt: Das unload 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 Ereignishandler-Eigenschaft.

js
addEventListener("unload", (event) => {});
onunload = (event) => {};

Ereignistyp

Ein generisches Event.

Ereignishandler-Aliase

Zusätzlich zur Window-Schnittstelle ist die Ereignishandler-Eigenschaft onunload auch für die folgenden Ziele verfügbar:

Hinweise zur Verwendung

Entwickler sollten die Verwendung dieses Ereignisses vermeiden.

Besonders auf mobilen Geräten wird das unload-Ereignis nicht zuverlässig ausgelöst. Zum Beispiel wird das unload-Ereignis in folgendem Szenario überhaupt nicht ausgelöst:

  1. Ein mobiler Benutzer besucht Ihre Seite.
  2. Der Benutzer wechselt dann zu einer anderen App.
  3. 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 existiert, nachdem das Ereignis ausgelöst wurde. Um dem entgegenzuwirken, werden einige Browser (wie Firefox) Seiten mit unload-Listenern nicht in den bfcache aufnehmen, was schlecht für die Leistung ist. Andere, wie Chrome, lösen das unload-Ereignis nicht aus, wenn ein Benutzer weg navigiert.

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 ebenfalls nicht zuverlässig ausgelöst wird, aber bfcache-kompatibel ist.

Wenn Sie speziell versuchen, das Entladen von Seiten zu erkennen, sollten Sie auf das pagehide-Ereignis achten.

Lesen Sie den Page Lifecycle API-Leitfaden für weitere Informationen über die mit dem unload-Ereignis verbundenen Probleme.

Beispiele

html
<!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:

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 Reihenfolge ausgelöst, die durch die console.log()-Nachrichten beschrieben wird.

Spezifikationen

Specification
HTML Standard
# event-unload
HTML Standard
# handler-window-onunload

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch