Window: pagehide-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

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

onpagehide = (event) => { }

Ereignistyp

Ein PageTransitionEvent. Erbt von Event.

Aliasse für Ereignishandler

Neben der Window-Schnittstelle ist die Ereignishandler-Eigenschaft onpagehide auch auf den folgenden Zielen verfügbar:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Hinweise zur Verwendung

Wie die Ereignisse unload und beforeunload wird auch dieses Ereignis von Browsern nicht zuverlässig ausgelöst, insbesondere auf Mobilgeräten. Im folgenden Szenario wird das pagehide-Ereignis beispielsweise überhaupt nicht ausgelöst:

1. Eine Person besucht Ihre Seite auf einem Mobilgerät.
2. Die Person wechselt zu einer anderen App.
3. Später schließt sie den Browser über die App-Verwaltung.

Dieses Ereignis ist jedoch mit dem Back/Forward-Cache (bfcache) kompatibel. Wenn Sie einen Listener dafür hinzufügen, verhindert dies nicht, dass die Seite in den bfcache aufgenommen wird.

Das beste Ereignis, um das Ende einer Sitzung zu erkennen, ist visibilitychange. In Browsern, die visibilitychange nicht unterstützen, ist pagehide die nächstbeste Alternative.

Wenn Sie speziell erkennen möchten, wann eine Seite entladen wird, ist pagehide die beste Wahl.

Weitere Informationen dazu, wie dieses Ereignis mit anderen Ereignissen im Lebenszyklus einer Seite zusammenhängt, finden Sie im Leitfaden zur Page Lifecycle API.

Beispiele

In diesem Beispiel wird ein Ereignishandler eingerichtet, der auf pagehide-Ereignisse achtet und eine besondere Verarbeitung durchführt, wenn die Seite für eine mögliche spätere Wiederverwendung gespeichert wird.

window.addEventListener("pagehide", (event) => {
  if (event.persisted) {
    /* the page isn't being discarded, so it can be reused later */
  }
});

Dies lässt sich auch mit der Ereignishandler-Eigenschaft onpagehide von Window schreiben. Beachten Sie jedoch, dass dadurch gegebenenfalls andere über onpagehide hinzugefügte Ereignis-Listener ersetzt werden:

window.onpagehide = (event) => {
  if (event.persisted) {
    /* the page isn't being discarded, so it can be reused later */
  }
};

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das Ereignis pageshow.
• Die Page Lifecycle API bietet Empfehlungen zum Umgang mit dem Lebenszyklus von Seiten in Ihren Webanwendungen.
• PageLifecycle.js: eine JavaScript-Bibliothek, die browserübergreifende Unterschiede beim Lebenszyklus von Seiten behandelt.
• Back/Forward-Cache erklärt, was der Back/Forward-Cache ist und welche Auswirkungen er auf verschiedene Ereignisse im Lebenszyklus einer Seite hat.