Dasvisibilitychange-Ereignis wird im Dokument ausgelöst, wenn die Inhalte seines Tabs sichtbar werden oder versteckt wurden.

Das Ereignis kann nicht abgebrochen werden.

Syntax

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

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

Ereignistyp

Ein generischesEvent.

Nutzungshinweise

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

Dieses Ereignis wird mit einemvisibilityState vonhidden ausgelöst, wenn ein Benutzer zu einer neuen Seite navigiert, Tabs wechselt, den Tab schließt, den Browser minimiert oder schließt oder, auf Mobilgeräten, vom Browser zu einer anderen App wechselt. Der Übergang zuhidden ist das letzte Ereignis, das für die Seite zuverlässig beobachtbar ist, daher sollten Entwickler es als wahrscheinliches Ende der Benutzersitzung betrachten (zum Beispiel für dasSenden von Analysedaten).

Der Übergang zuhidden ist auch ein guter Punkt, an dem Seiten die Aktualisierung der Benutzeroberfläche stoppen und Aufgaben beenden können, die der Benutzer nicht im Hintergrund laufen lassen möchte.

Beispiele

Musik pausieren beim Übergang zu hidden

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

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

Senden von Sitzungsend-Analyse beim Übergang zu hidden

Dieses Beispiel behandelt den Übergang zuhidden als Ende der Benutzersitzung und sendet die entsprechenden Analysen mithilfe derNavigator.sendBeacon()-API:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Page Visibility API
• Document.visibilityState
• Document.hidden
• Don't lose user and app state, use Page Visibility erklärt ausführlich, warum Sievisibilitychange und nichtbeforeunload/unload verwenden sollten.
• Page Lifecycle API gibt Leitfäden zu Best Practices im Umgang mit dem Verhalten von Seitenlebenszyklen in Ihren Webanwendungen.