Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Fullscreen API
DieFullscreen-API fügt Methoden hinzu, um ein bestimmtesElement (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 ArtikelLeitfaden zur Fullscreen-API für Details zur Nutzung der API.
Schnittstellen
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.
Instanzmethoden
Die Fullscreen-API fügt den SchnittstellenDocument undElement Methoden hinzu, um den Vollbildmodus ein- und auszuschalten.
Instanzmethoden der Document-Schnittstelle
Document.exitFullscreen()Fordert denUser-Agent auf, vom Vollbildmodus in den Fenster-Modus zu wechseln. Gibt ein
Promisezurück, das aufgelöst wird, wenn der Vollbildmodus vollständig beendet wurde.
Instanzmethoden der Element-Schnittstelle
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
Promisezurück, das aufgelöst wird, sobald der Vollbildmodus aktiviert wurde.
Instanzeigenschaften
Document.fullscreenElement/ShadowRoot.fullscreenElementDie Eigenschaft
fullscreenElementgibt Ihnen dasElementan, das derzeit im DOM (oder im Shadow-DOM) im Vollbildmodus dargestellt wird. Ist diesnull, befindet sich das Dokument (oder Shadow-DOM) nicht im Vollbildmodus.Document.fullscreenEnabledDie Eigenschaft
fullscreenEnabledgibt an, ob es möglich ist, den Vollbildmodus zu aktivieren. Dies istfalse, wenn der Vollbildmodus aus irgendeinem Grund nicht verfügbar ist (wie zum Beispiel dem nicht erlaubten"fullscreen"-Feature oder fehlender Unterstützung des Vollbildmodus).
Veraltete Eigenschaften
Document.fullscreenVeraltetEin Boolean-Wert, der
trueist, wenn das Dokument derzeit ein Element im Vollbildmodus darstellt; andernfalls wirdfalsezurückgegeben.Hinweis:Verwenden Sie stattdessen die
fullscreenElement-Eigenschaft imDocumentoderShadowRoot; wenn sie nichtnullist, dann wird einElementim Vollbildmodus dargestellt.
Ereignisse
fullscreenchangeWird an ein
Elementgesendet, wenn es in den oder aus dem Vollbildmodus wechselt.fullscreenerrorWird an ein
Elementgesendet, wenn ein Fehler auftritt, während versucht wird, es in den oder aus dem Vollbildmodus zu schalten.
Zugriffskontrolle
Die Verfügbarkeit des Vollbildmodus kann mithilfe einerPermissions 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.
Anwendungshinweise
Benutzer können den Vollbildmodus durch Drücken derESC (oderF11) 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 (oderAlt-Tab) beendet ebenfalls den Vollbildmodus.
Beispiele
Einfacher Vollbildgebrauch
In diesem Beispiel wird ein Video auf einer Webseite angezeigt. Durch Drücken derEnter-Taste kann der Benutzer zwischen Fenster- und Vollbildanzeige des Videos umschalten.
Überwachen der Enter-Taste
Wenn die Seite geladen wird, wird dieser Code ausgeführt, um einen Ereignis-Listener zum Überwachen derEnter-Taste einzurichten.
const video = document.getElementById("video");// On pressing ENTER call toggleFullScreen methoddocument.addEventListener("keydown", (e) => { if (e.key === "Enter") { toggleFullScreen(video); }});Umschalten des Vollbildmodus
Dieser Code wird vom obigen Ereignishandler aufgerufen, wenn der Benutzer dieEnter-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 desfullscreenElement-Attributs desdocument. Wenn der Wertnull 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 vonElement.requestFullscreen() auf dem<video>-Element.
Wenn der Vollbildmodus bereits aktiv ist (fullscreenElement ist nichtnull), rufen wirexitFullscreen() auf demdocument auf, um den Vollbildmodus zu beenden.