Die Fullscreen-API fügt Methoden hinzu, um ein bestimmtes Element (und dessen Nachkommen) im Vollbildmodus darzustellen und den Vollbildmodus wieder zu verlassen, wenn er nicht mehr benötigt wird. Dies macht es möglich, gewünschte Inhalte - wie zum Beispiel ein Online-Spiel - bildschirmfüllend darzustellen und dabei alle Browser-Benutzeroberflächenelemente und andere Anwendungen bis zum Verlassen des Vollbildmodus auszublenden.
Siehe den Artikel Leitfaden zur Fullscreen-API für Details zur Nutzung der API.
SchnittstellenDie 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.
InstanzmethodenDie 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.
Hinweis: Das Navigieren zu einer anderen Seite, das Wechseln von Tabs oder das Umschalten zu einer anderen Anwendung über einen Anwendungsschalter (oder Alt-Tab) beendet ebenfalls den Vollbildmodus.
Beispiele Einfacher VollbildgebrauchIn 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.
Ãberwachen der Enter-TasteWenn 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);
}
});
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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4