1. Web
  2. Web-APIs
  3. Window
  4. unload

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Window: unload event

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

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

Es wird ausgelöst nach:

Das Dokument befindet sich in folgendem Zustand:

  • Alle Ressourcen existieren weiterhin (img, iframe usw.)
  • Für Endbenutzer ist nichts mehr sichtbar
  • UI-Interaktionen haben keine Wirkung (window.open, alert, confirm usw.)
  • Ein Fehler wird den Entladevorgang nicht stoppen

Beachten Sie, dass das unload-Ereignis auch der Dokumentstruktur 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 Event-Handler-Eigenschaft.

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

onunload = (event) => { }

Ereignistyp

Ein generisches Event.

Event-Handler-Aliasse

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

Hinweise zur Verwendung

Entwickler sollten die Verwendung dieses Ereignisses vermeiden.

Insbesondere auf Mobilgeräten wird das unload-Ereignis nicht zuverlässig ausgelöst. Beispielsweise wird das unload-Ereignis im folgenden 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.

Außerdem ist das unload-Ereignis nicht mit dem Back/forward cache (bfcache) kompatibel, weil viele Seiten, die dieses Ereignis verwenden, davon ausgehen, dass die Seite nach Auslösen des Ereignisses nicht weiter existiert. Um dem entgegenzuwirken, legen einige Browser (wie Firefox) Seiten mit unload-Listenern nicht im bfcache ab, was sich negativ auf die Leistung auswirkt.

Aus diesen Gründen hat Chrome das standardmäßige Auslösen von unload-Ereignissen eingestellt. Eine Seite, die weiterhin von unload abhängt, kann sich mithilfe der unload-Direktive des Permissions-Policy-Headers wieder dafür anmelden.

Verwenden Sie anstelle von unload die folgenden Ereignisse, die beide mit dem bfcache kompatibel sind:

  • Das visibilitychange-Ereignis wird ausgelöst, wenn sich Document.visibilityState von visible zu hidden oder umgekehrt ändert. Dies ist das letzte Ereignis, das zuverlässig ausgelöst wird, daher ist es der beste Ort, um den Anwendungszustand zu speichern oder Analysedaten zu senden. Beachten Sie, dass visibilitychange ausgelöst wird, wenn der Benutzer zu einem anderen Tab wechselt, die aktuelle Seite verlässt oder sie schließt.
  • Das pagehide-Ereignis wird ausgelöst, wenn der Browser die aktuelle Seite ausblendet, während er eine andere Seite aus dem Verlauf der Sitzung darstellt. Dies ist nützlich, wenn Sie gezielt erkennen möchten, dass der Benutzer von der Seite weg navigiert. Wie unload wird es jedoch nicht zuverlässig ausgelöst, insbesondere auf Mobilgeräten. Bevorzugen Sie daher nach Möglichkeit visibilitychange.

Anstatt beispielsweise Daten in einem unload-Listener zu senden:

js
window.addEventListener("unload", () => {
  navigator.sendBeacon("/log", analyticsData);
});

Senden Sie sie, wenn die Seite ausgeblendet wird:

js
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
});

Weitere Informationen zu den Problemen im Zusammenhang mit dem unload-Ereignis finden Sie im Leitfaden zur Page Lifecycle API.

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>

Im Folgenden 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 Ereignisse in der durch die console.log()-Meldungen beschriebenen Reihenfolge ausgelöst.

Spezifikationen

Spezifikation
HTML
# event-unload
HTML
# handler-window-onunload

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden