Fullscreen API requestFullscreen() Methode

Definition und Verwendung

requestFullscreen() Methode, um Elemente im Vollbildmodus zu öffnen.

Hinweis:Verwenden Sie exitFullscreen() MethodeBeenden des Vollbildmodus.

Beispiel

Beispiel 1

Anzeigen des <video>-Elements im Vollbildmodus:

/* Erhalten Sie das Element, das im Vollbildmodus angezeigt werden soll (im Beispiel das Video): */
var elem = document.getElementById("myvideo");
/* Wenn die Funktion openFullscreen() ausgeführt wird, wird das Video im Vollbildmodus geöffnet.
Bitte beachten Sie, dass wir verschiedene Browser-Prefixe enthalten müssen, da sie den requestFullscreen-Attribute noch nicht unterstützen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Versuchen Sie es selbst

Beispiel 2

Um eine HTML-Seite im Vollbildmodus zu öffnen, verwenden Sie document.documentElement anstatt document.getElementById("element").In diesem Beispiel verwenden wir auch eine Schließfunktion, um den Vollbildmodus zu schließen:

/* documentElement (<html>) zum Vollbildmodus anzeigen */
var elem = document.documentElement;
/* Vollbild anzeigen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Vollbild schließen */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

Versuchen Sie es selbst

Beispiel 3

Wenn die Seite im Vollbildmodus ist, können Sie auch CSS verwenden, um die Seitenausgabe zu konfigurieren:

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11-Syntax */
:-ms-fullscreen {
  background-color: yellow;
}
/* Standard-Syntax */
:fullscreen {
  background-color: yellow;
}

Versuchen Sie es selbst

Syntax

HTMLElementObject.requestFullscreen()

Parameter

Keine.

Technische Details

Rückgabewert: Kein Rückgabewert.

Browser-Unterstützung

Die Zahlen in der Tabelle kennzeichnen die erste Browserversion, die diese Methode vollständig unterstützt.

Anmerkung:Einige Browser benötigen spezifische Präfixe (siehe Klammern):

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)