Fullscreen API

Die Fullscreen-API hat keine eigenen Schnittstellen. Stattdessen erweitert sie mehrere andere Schnittstellen, um die für die Vollbildfunktionalität benötigten Methoden, Eigenschaften und Ereignishandler hinzuzufügen. Diese sind in den folgenden Abschnitten aufgeführt.

Die Fullscreen-API fügt den Schnittstellen Document und Element Methoden hinzu, um den Vollbildmodus ein- und auszuschalten.

Document.exitFullscreen()

Fordert den User-Agent auf, vom Vollbildmodus in den Fenster-Modus zu wechseln. Gibt ein Promise zurück, das aufgelöst wird, wenn der Vollbildmodus vollständig beendet wurde.

Element.requestFullscreen()

Fordert den User-Agent auf, das angegebene Element (und dessen Nachkommen) im Vollbildmodus darzustellen und dabei alle UI-Elemente des Browsers sowie alle anderen Anwendungen vom Bildschirm zu entfernen. Gibt ein Promise zurück, das aufgelöst wird, sobald der Vollbildmodus aktiviert wurde.

Document.fullscreenElement / ShadowRoot.fullscreenElement

Die Eigenschaft fullscreenElement gibt Ihnen das Element an, das derzeit im DOM (oder im Shadow-DOM) im Vollbildmodus dargestellt wird. Ist dies null, befindet sich das Dokument (oder Shadow-DOM) nicht im Vollbildmodus.

Document.fullscreenEnabled

Die Eigenschaft fullscreenEnabled gibt an, ob es möglich ist, den Vollbildmodus zu aktivieren. Dies ist false, wenn der Vollbildmodus aus irgendeinem Grund nicht verfügbar ist (wie zum Beispiel dem nicht erlaubten "fullscreen"-Feature oder fehlender Unterstützung des Vollbildmodus).

Document.fullscreen Veraltet

Ein Boolean-Wert, der true ist, wenn das Dokument derzeit ein Element im Vollbildmodus darstellt; andernfalls wird false zurückgegeben.

Hinweis: Verwenden Sie stattdessen die fullscreenElement-Eigenschaft im Document oder ShadowRoot; wenn sie nicht null ist, dann wird ein Element im Vollbildmodus dargestellt.

fullscreenchange

Wird an ein Element gesendet, wenn es in den oder aus dem Vollbildmodus wechselt.

fullscreenerror

Wird an ein Element gesendet, wenn ein Fehler auftritt, während versucht wird, es in den oder aus dem Vollbildmodus zu schalten.

Die Verfügbarkeit des Vollbildmodus kann mithilfe einer Permissions Policy gesteuert werden. Das Feature "Vollbildmodus" wird durch den String "fullscreen" identifiziert, mit einem Standardwert für die Positivliste von "self", was bedeutet, dass der Vollbildmodus in Dokumentkontexten auf oberster Ebene sowie in eingebetteten Browserkontexten, die aus demselben Ursprung wie das oberste Dokument geladen werden, erlaubt ist.

Benutzer können den Vollbildmodus durch Drücken der ESC (oder F11) Taste verlassen, anstatt zu warten, bis die Seite oder App dies programmgesteuert tut. Stellen Sie sicher, dass Sie in Ihrer Benutzeroberfläche geeignete Bedienelemente bereitstellen, die den Benutzer darüber informieren, dass diese Option für ihn verfügbar ist.

In diesem Beispiel wird ein Video auf einer Webseite angezeigt. Durch Drücken der Enter-Taste kann der Benutzer zwischen Fenster- und Vollbildanzeige des Videos umschalten.

Live-Beispiel ansehen

Überwachen der Enter-Taste

Wenn die Seite geladen wird, wird dieser Code ausgeführt, um einen Ereignis-Listener zum Überwachen der Enter-Taste einzurichten.

const video = document.getElementById("video");

// On pressing ENTER call toggleFullScreen method
document.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    toggleFullScreen(video);
  }
});

Umschalten des Vollbildmodus

Dieser Code wird vom obigen Ereignishandler aufgerufen, wenn der Benutzer die Enter-Taste drückt.

function toggleFullScreen(video) {
  if (!document.fullscreenElement) {
    // If the document is not in full screen mode
    // make the video full screen
    video.requestFullscreen();
  } else {
    // Otherwise exit the full screen
    document.exitFullscreen?.();
  }
}

Dies beginnt mit dem Überprüfen des Wertes des fullscreenElement-Attributs des document. Wenn der Wert null ist, befindet sich das Dokument derzeit im Fenstermodus und wir müssen in den Vollbildmodus wechseln; andernfalls ist es das Element, das derzeit im Vollbildmodus ist. Der Wechsel in den Vollbildmodus erfolgt durch Aufruf von Element.requestFullscreen() auf dem <video>-Element.

Wenn der Vollbildmodus bereits aktiv ist (fullscreenElement ist nicht null), rufen wir exitFullscreen() auf dem document auf, um den Vollbildmodus zu beenden.

• Element.requestFullscreen()
• Document.exitFullscreen()
• Document.fullscreen
• Document.fullscreenElement
• :fullscreen, ::backdrop
• allowfullscreen