Dokument: visibilitychange-Ereignis
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Das visibilitychange-Ereignis wird am Dokument ausgelöst, wenn sich dessen Sichtbarkeitsstatus ändert – zum Beispiel, wenn der Benutzer die Browser-Tabs wechselt, zu einer neuen Seite navigiert, den Browser minimiert oder schließt oder auf Mobilgeräten zu einer anderen App wechselt.
Das Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("visibilitychange", (event) => { })
onvisibilitychange = (event) => { }
Ereignistyp
Ein generisches Event.
Nutzungshinweise
Das Ereignis enthält nicht den aktualisierten Sichtbarkeitsstatus des Dokuments, aber Sie können diese Information über die 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 Mobilgeräten 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 das wahrscheinliche Ende der Sitzung des Benutzers betrachten (zum Beispiel für das Senden von Analysedaten).
Der Übergang zu hidden ist auch ein guter Zeitpunkt, an dem Seiten das Aktualisieren der Benutzeroberfläche stoppen und Aufgaben beenden können, die der Benutzer nicht im Hintergrund weiterlaufen lassen möchte.
Beispiele
Musik pausieren beim Übergang zu hidden
Dieses Beispiel pausiert die Wiedergabe von Audio, wenn die Seite ausgeblendet wird, und setzt die Wiedergabe fort, wenn die Seite wieder sichtbar wird. Für ein vollständiges Beispiel siehe die Dokumentation Page Visibility API: Audio pausieren beim Verstecken der Seite.
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 End-of-Session-Analytics beim Übergang zu hidden
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);
}
};
Spezifikationen
| Specification |
|---|
| HTML # event-visibilitychange |
| HTML # handler-onvisibilitychange |
Browser-Kompatibilität
Siehe auch
- Page Visibility API
Document.visibilityStateDocument.hidden- Lose nicht Benutzer- und App-Status, verwenden Sie Page Visibility erklärt im Detail, warum Sie
visibilitychangeund nichtbeforeunload/unloadverwenden sollten. - Page Lifecycle API bietet Best-Practice-Leitfaden für den Umgang mit Seitenlebenszyklusverhalten in Ihren Webanwendungen.