Einsatzmöglichkeiten der Page-Visibility-API

Gerade bei Seiten, die sehr rechenintensiv sind, da beispielsweise parmanent per JavaScript Daten nachgeladen oder Animationen ausgführt werden, bietet sich die Page-Visibility-API an. Sie kann dafür sorgen, dass diese rechenintensiven Funktionen nur dann ausgführt werden, wenn sich die Seite auch in einem sichtbaren Tab befindet.

Auch für Seiten mit Videowiedergabe kann die Page-Visibility-API Verwendung finden und dafür sorgen, dass eine Wiedergabe automatisch angehalten wird, wenn der Tab der Seite in den Hintergrund verschwindet, da beispielsweise ein anderer Tab aufgerufen wird.

Als sichtbar gilt eine Seite, wenn sie sich in einem aktiven Tab befindet. Als unsichtbar gilt eine Seite, wenn sie sich in einem Tab im Hintergrund befindet oder wenn das Browserfenster minimiert ist.

So funktioniert die Page-Visibility-API

Es gibt zwei Möglichkeiten, herauszufinden, ob die Seite sichtbar oder nicht sichtbar ist. Die einfachste Variante ist eine Abfrage der Objekteigenschaft „document.hidden“:

if (document.hidden == false) {
  document.title = "Sichtbare Seite";
}

Die Eigenschaft „document.hidden“ gibt „true“ zurück, wenn die Seite nicht sichtbar ist und „false“, wenn die Seite sichtbar ist. Da sich die Page-Visibility-API noch in einem experimentellen Stadium befindet, muss derzeit noch mit Vendor-Präfixen gearbeitet werden. Aus „document.hidden“ wird dann „document.mozHidden“ für Gecko-Browser beziehungsweise „document.webkitHidden“ bei Webkit-Browsern.

Wer mehr Informationen über den aktuellen Status der Sichtbarkeit der Seite erfahren möchte, kann mit der Objekteigenschaft „document.visibilityState“ neben der Sichtbarkeit einer Seite auch noch den Ladestatus erfahren:

if (document.visibilityState == "visible") {
  document.title = "Sichtbare Seite";
} else if (document.visibilityState == "hidden") {
 document.title = "Nicht sichtbare Seite";
} else if (document.visibilityState == "prerender") {
 document.title = "Inhalte werden geladen";
}

Neben den Werten „visible“ und „hidden“ kennt die Eigenschaft noch den Wert „prerender“ für den Fall, dass eine Seite noch Inhalte lädt. Der Wert wird nur beim erstmaligen Laden einer Seite ausgegeben. Auch für „document.visibilityState“ müssen derzeit noch die entsprechenden Vendor-Versionen verwendet werden, also „document.mozVisibilityState“ und „document.webkitVisibilityState“.

Sichtbarkeit einer Seite überwachen

Sinnvoll eingsetzt werden kann die Page-Visibility-API nur, indem man den Sichtbarkeitsstatus über einen Event-Handler auf Änderungen überwacht. Nur so kann die API feststellen, ob der Tab der Seite gerade in den Hintergrund rückt beziehungsweise ob der Tab wieder aktiviert wird.

Mit dem Ereignis „visibilityChange“ lässt sich genau dieser Status feststellen:

document.addEventListener("visibilitychange", seitentitel, false);

function seitentitel() {
  if (document.visibilityState == "visible") {
   document.title = "Sichtbare Seite";
  } else if (document.visibilityState == "hidden") {
   document.title = "Nicht sichtbare Seite";
  } else if (document.visibilityState == "prerender") {
   document.title = "Inhalte werden geladen";
  }
}

Das Ereignis „visibilityChange“ wird immer dann ausgelöst, wenn die Seite ihre Sichtbarkeit ändert. Über die dann aufgerufene Funktion – im Beispiel „seitentitel()“ – wird der Titel der Seite geändert. Alternativ lässt sich zum Beispiel auch eine Videowiedergabe anhalten beziehungsweise fortsetzen.

Auch bei dem Ereignis gilt es, den jeweiligen Vendor-Präfix zu verwenden, also „mozVisibilityChange“ und „webkitVisibilityChange“. Derzeit unterstützen Firefox und Chrome die Page-Visibility-API.

Was denkt ihr über die Page-Visibility-API? Könnt ihr euch weitere Szenarien vorstellen, für welche die API sinnvoll eingesetzt werden kann?

Weiterführende Links zum Thema JavaScript:

• JavaScript: Klassen mit ClassList-API zuweisen, austauschen und löschen
• Fullscreen-API: So funktioniert der Vollbildmodus mit JavaScript und CSS
• JavaScript: Umfassender Zugriff auf DOM-Elemente mit „querySelector()“
• JavaScript: Mit File-API auf lokale Dateien zugreifen
• JavaScript: Mehrfingergesten erkennen und einsetzen