Wie man Vollbildmodus erreicht

Lernen Sie, wie man mit JavaScript ein Vollbildfenster erstellt.

Vollbild-Fenster

Wie man mit JavaScript Elemente im Vollbildmodus anzeigt.

Klicken Sie auf die Schaltfläche, um das Video im Vollbildmodus zu öffnen:

Selbst ausprobieren

Vollbild-Video

Um ein Element im Vollbildmodus zu öffnen, verwenden wir element.requestFullscreen() Methode:

Beispiel

<script>
/* Erhalten Sie das Element, das im Vollbildmodus angezeigt werden soll (im Beispiel ein Video): */
var elem = document.getElementById("myvideo");
/* Wenn die Funktion openFullscreen() ausgeführt wird, wird das Video im Vollbildmodus geöffnet. */
Beachten Sie, dass wir für verschiedene Browser Präfixe enthalten müssen, da sie den Methodenaufruf requestFullscreen 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();
  }
}
</script>

Selbst ausprobieren

Vollbild-Dokument

Um die gesamte Seite im Vollbildmodus zu öffnen, verwenden Sie document.documentElement ersatz document.getElementById("element").

In diesem Beispiel verwenden wir auch eine geschlossene Funktion, um aus dem Vollbildmodus auszusteigen:

Beispiel

<script>
/* documentElement (<html>) erhalten, um die Seite im Vollbildmodus anzuzeigen */
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 beenden */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

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

Beispiel

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

Selbst ausprobieren

Verwandte Seiten

HTML DOM Referenzhandbuch:requestFullscreen() Methode

HTML DOM Referenzhandbuch:exitFullscreen() Methode

HTML DOM Referenzhandbuch:documentElement-Methode