Window: pagehide — Ereignis · JavaScript-Referenz

Signatur

window.addEventListener("pagehide", handler)

Beschreibung

Das Ereignis pagehide wird an das Window gesendet, wenn der Browser die aktuelle Seite nicht mehr anzeigt. Das passiert beim Wegnavigieren, beim Neuladen, beim Schließen des Tabs oder wenn der Browser die Seite in den Back/Forward-Cache (bfcache) verschiebt. Das Gegenstück ist pageshow.

Das Ereignisobjekt ist ein PageTransitionEvent. Seine Eigenschaft persisted zeigt an, ob die Seite im bfcache aufbewahrt wird (true) und später ohne Neuladen wiederhergestellt werden kann, oder ob sie verworfen wird (false).

Im Gegensatz zu unload und beforeunload verhindert ein pagehide-Listener nicht, dass die Seite in den bfcache kommt. Deshalb ist es neben visibilitychange der empfohlene Zeitpunkt, um zum Schluss noch aufzuräumen: Analysedaten per navigator.sendBeacon() senden, Zustand in localStorage speichern oder offene Verbindungen (WebSocket, IndexedDB) schließen.

Registrieren kannst du den Listener mit window.addEventListener("pagehide", handler) oder über die Eigenschaft window.onpagehide = handler. Das Ereignis lässt sich nicht abbrechen und steigt nicht im DOM auf (kein Bubbling).

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses: `"pagehide"`.
$handler Pflicht	(event: PageTransitionEvent) => void		Callback-Funktion. Sie erhält ein `PageTransitionEvent` mit der booleschen Eigenschaft `persisted`.
$options	boolean \| AddEventListenerOptions	false	Optionale Einstellungen wie `{ once: true }` oder `{ capture: true }`.

Beispiele

Unterscheiden, ob die Seite im bfcache landet

window.addEventListener("pagehide", (event) => {
  if (event.persisted) {
    console.log("Seite wird im Back/Forward-Cache aufbewahrt.");
  } else {
    console.log("Seite wird verworfen.");
  }
});

Seite wird im Back/Forward-Cache aufbewahrt.

Analysedaten zuverlässig beim Verlassen senden

const sessionStart = performance.now();

window.addEventListener("pagehide", () => {
  const payload = JSON.stringify({
    page: location.pathname,
    durationMs: Math.round(performance.now() - sessionStart)
  });
  // sendBeacon läuft auch weiter, wenn die Seite schon entladen ist
  navigator.sendBeacon("/api/analytics", payload);
});

Formularentwurf sichern und beim Zurückkehren wiederherstellen

const textarea = document.querySelector("#entwurf");

window.onpagehide = () => {
  localStorage.setItem("entwurf", textarea.value);
};

window.addEventListener("pageshow", (event) => {
  if (!event.persisted) {
    textarea.value = localStorage.getItem("entwurf") ?? "";
  }
  console.log("Wiederhergestellt aus bfcache:", event.persisted);
});

Wiederhergestellt aus bfcache: false

Verbindung schließen und Listener wieder entfernen

const socket = new WebSocket("wss://example.com/live");

const onPageHide = (event) => {
  // Offene WebSockets können den bfcache blockieren
  socket.close();
  console.log("Socket geschlossen, persisted =", event.persisted);
};

window.addEventListener("pagehide", onPageHide);

// Später, z. B. wenn die Komponente entfernt wird:
window.removeEventListener("pagehide", onPageHide);

// Wichtig · Fallstricke

Nimm pagehide statt unload: unload-Listener verhindern in vielen Browsern den bfcache, und Chrome schafft unload nach und nach ab. pagehide hat dieses Problem nicht.
Auf Mobilgeräten unzuverlässig: Wird ein Tab im Hintergrund vom Betriebssystem beendet, feuert pagehide oft gar nicht. Für kritische Daten wie Analysewerte solltest du zusätzlich auf visibilitychange mit document.visibilityState === \"hidden\" reagieren.
Keine asynchrone Arbeit: fetch() ohne keepalive: true, Promises oder Timer werden nach dem Ereignis unter Umständen nicht mehr ausgeführt. Nutze navigator.sendBeacon() oder fetch(url, { keepalive: true }).
Kein Bestätigungsdialog: pagehide kann die Navigation nicht aufhalten. Dafür ist beforeunload zuständig.
persisted ist nur ein Hinweis: Auch bei persisted === true kann der Browser die Seite später aus dem Cache werfen. Räume Ressourcen deshalb in beiden Fällen auf.
Browser-Unterstützung: Alle modernen Browser unterstützen das Ereignis. Safari löst es in manchen Fällen schon beim Wechsel des Tabs aus.

Siehe auch

Navigator.sendBeacon() Element: pointermove Window: pageshow Window: pageswap Window: pagereveal