Vollbildfenster abrufen in JavaScript

In diesem Tutorial erfahren Sie, wie Sie mit JavaScript ein Vollbildfenster erhalten.

Die Vollbild-API hilft uns, JavaScript-Code zu verwenden, um eine Webseite in den Vollbildmodus zu konvertieren. Wir können es entweder auf das gesamte Dokument oder ein einzelnes Element anwenden.

Überprüfen Sie das folgende Beispiel.

function getFullscreenElement() {
  return document.fullscreenElement        // standard property
      || document.webkitFullscreenElement  // safari/opera support
      || document.mozFullscreenElement     // firefox support
      || document.msFullscreenElement;     // ie/edge support
}
function toggleFullscreen() {
  if (getFullscreenElement()) {
    document.exitFullscreen();
  } else {
    document.getElementById('container')
        .getFullscreenElement()
        .catch(console.log);
  }
}

Im obigen Code gibt es vier verschiedene Optionen in der Funktion getFullscreenElement(), wie document.fullscreenElement, document.webkitFullscreenElement, document.mozFullscreenElement und document.msFullscreenElement, was Vollbild macht Befehl kompatibel mit fast jedem Browser.

Der toggleFullscreen() bewirkt, dass das Fenster in einen Vollbildmodus wechselt, der nicht im Vollbildmodus ist, und umgekehrt durch Klicken auf die Schaltfläche Vollbildmodus eingeben. Wir können diese Funktion für gegebene Elemente wie folgt aufrufen.

document.getElementById('button').addEventListener('click', () => {
  toggleFullscreen();