Window: pagehide-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

onpagehide = (event) => { }

Ereignistyp

Ein PageTransitionEvent, das von Event erbt.

Ereigniseigenschaften

PageTransitionEvent.persisted Schreibgeschützt

Gibt an, ob das Dokument aus einem Cache geladen wird.

Ereignis-Handler-Aliasse

Zusätzlich zur Window-Schnittstelle ist die Ereignis-Handler-Eigenschaft onpagehide auch bei den folgenden Zielen verfügbar:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Hinweise zur Verwendung

Wie die unload und beforeunload Ereignisse wird dieses Ereignis von Browsern, insbesondere auf Mobilgeräten, nicht zuverlässig ausgelöst. Zum Beispiel wird das pagehide-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.

Jedoch, im Gegensatz zu den unload- und beforeunload-Ereignissen, ist dieses Ereignis kompatibel mit dem Back/Forward-Cache (bfcache), sodass das Hinzufügen eines Listeners zu diesem Ereignis nicht verhindert, dass die Seite in den bfcache aufgenommen wird.

Das beste Ereignis, um das Ende einer Benutzersitzung zu signalisieren, ist das visibilitychange Ereignis. In Browsern, die visibilitychange nicht unterstützen, ist das pagehide-Ereignis die beste Alternative.

Wenn Sie speziell versuchen, Seiten-Entlade-Ereignisse zu erkennen, ist das pagehide-Ereignis die beste Option.

Sehen Sie sich das Page Lifecycle API an, um mehr darüber zu erfahren, wie dieses Ereignis mit anderen Ereignissen im Seitenlebenszyklus zusammenhängt.

Beispiele

In diesem Beispiel wird ein Ereignishandler eingerichtet, um auf pagehide-Ereignisse zu achten und eine spezielle Behandlung durchzuführen, wenn die Seite für eine mögliche Wiederverwendung gespeichert wird.

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

Dies kann auch unter Verwendung der onpagehide-Ereignis-Handler-Eigenschaft auf dem Window geschrieben 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 pageshow Ereignis.
• Das Page Lifecycle API gibt Best Practices für die Handhabung des Seitenlebenszyklus in Ihren Webanwendungen.
• PageLifecycle.js: eine JavaScript-Bibliothek, die sich mit browserübergreifenden Inkonsistenzen im Seitenlebenszyklusverhalten befasst.
• Back/forward cache erklärt, was der Back/Forward-Cache ist und seine Auswirkungen auf verschiedene Seitenlebenszyklusereignisse.