Document: visibilitychange-Ereignis

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

addEventListener("visibilitychange", (event) => {});

onvisibilitychange = (event) => {};

Ein generisches Event.

Das Ereignis beinhaltet nicht den aktualisierten Sichtbarkeitsstatus des Dokuments, aber Sie können diese Information von der visibilityState-Eigenschaft des Dokuments erhalten.

Dieses Ereignis wird mit einem visibilityState von hidden ausgelöst, wenn ein Benutzer zu einer neuen Seite navigiert, Tabs wechselt, den Tab schließt, den Browser minimiert oder schließt oder auf einem mobilen Gerät vom Browser zu einer anderen App wechselt. Der Übergang zu hidden ist das letzte Ereignis, das von der Seite zuverlässig beobachtet werden kann, daher sollten Entwickler es als wahrscheinliches Ende der Benutzersitzung behandeln (zum Beispiel zum Senden von Analysedaten).

Der Übergang zu hidden ist auch ein guter Zeitpunkt, zu dem Seiten UI-Aktualisierungen stoppen und alle Aufgaben anhalten können, die der Benutzer nicht im Hintergrund ausgeführt haben möchte.

Dieses Beispiel pausiert die Wiedergabe von Audio, wenn die Seite verborgen wird und setzt die Wiedergabe fort, wenn die Seite wieder sichtbar wird. Für ein vollständiges Beispiel siehe die Page Visibility API: Pausing audio on page hide Dokumentation.

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    playingOnHide = !audio.paused;
    audio.pause();
  } else {
    // Resume playing if audio was "playing on hide"
    if (playingOnHide) {
      audio.play();
    }
  }
});

Dieses Beispiel behandelt den Übergang zu hidden als das Ende der Benutzersitzung und sendet die entsprechenden Analysen mit der Navigator.sendBeacon()-API:

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

• Page Visibility API
• Document.visibilityState
• Document.hidden
• Don't lose user and app state, use Page Visibility erklärt im Detail, warum Sie visibilitychange und nicht beforeunload/unload verwenden sollten.
• Page Lifecycle API bietet Best-Practice-Anleitungen zum Umgang mit dem Seitenlebenszyklusverhalten in Ihren Webanwendungen.