Window: unload-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onunload = (event) => { }

Ereignistyp

Ein generisches Event.

Aliase für Event-Handler

Neben der Window-Schnittstelle ist die Event-Handler-Eigenschaft onunload auch für die folgenden Ziele verfügbar:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Hinweise zur Verwendung

Entwickler sollten dieses Ereignis nicht verwenden.

Insbesondere auf Mobilgeräten wird das unload-Ereignis nicht zuverlässig ausgelöst. Im folgenden Szenario wird es beispielsweise überhaupt nicht ausgelöst:

1. Ein Nutzer besucht Ihre Seite auf einem Mobilgerät.
2. Der Nutzer wechselt zu einer anderen App.
3. Später schließt der Nutzer den Browser über den App-Manager.

Außerdem ist das unload-Ereignis nicht mit dem Back/Forward-Cache (bfcache) kompatibel, da viele Seiten, die dieses Ereignis verwenden, davon ausgehen, dass die Seite nach dem Auslösen des Ereignisses nicht mehr existiert. Um dem entgegenzuwirken, nehmen einige Browser (etwa Firefox) Seiten mit unload-Event-Listenern nicht in den bfcache auf. Das beeinträchtigt die Leistung.

Aus diesen Gründen löst Chrome unload-Ereignisse standardmäßig nicht mehr aus. Eine Seite, die weiterhin von unload abhängt, kann die Auslösung mithilfe der unload-Direktive des Permissions-Policy-Headers wieder aktivieren.

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

• Das visibilitychange-Ereignis wird ausgelöst, wenn Document.visibilityState von visible zu hidden oder umgekehrt wechselt. Es ist das letzte Ereignis, das zuverlässig ausgelöst wird, und daher der beste Zeitpunkt, um den Anwendungszustand zu speichern oder Analysedaten zu senden. Beachten Sie, dass visibilitychange ausgelöst wird, wenn der Nutzer 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, um eine andere Seite aus dem Sitzungsverlauf anzuzeigen. Das ist nützlich, wenn Sie gezielt erkennen möchten, ob der Nutzer die Seite verlässt. Wie unload wird es jedoch insbesondere auf Mobilgeräten nicht zuverlässig ausgelöst. Bevorzugen Sie daher nach Möglichkeit visibilitychange.

Statt Daten beispielsweise in einem unload-Event-Listener zu senden:

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

Senden Sie sie, wenn die Seite ausgeblendet wird:

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

<!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()-Meldungen beschriebenen Reihenfolge ausgelöst.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwandte Ereignisse: DOMContentLoaded, readystatechange, load
• Dokumente entladen – ein Dokument entladen
• Das visibilitychange-Ereignis.
• Nutzer- und Anwendungszustand nicht verlieren: Page Visibility verwenden erklärt ausführlich, warum Sie visibilitychange statt beforeunload/unload verwenden sollten.
• Die Page Lifecycle API bietet Best-Practice-Empfehlungen für den Umgang mit dem Lebenszyklus von Seiten in Ihren Webanwendungen.
• PageLifecycle.js: eine JavaScript-Bibliothek, die browserübergreifende Unterschiede beim Lebenszyklus von Seiten berücksichtigt.
• Back/Forward-Cache erklärt, was der Back/Forward-Cache ist und welche Auswirkungen er auf verschiedene Ereignisse im Lebenszyklus einer Seite hat.