Element: fullscreenchange Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das fullscreenchange-Ereignis wird sofort ausgelöst, nachdem ein Element in den oder aus dem Vollbildmodus wechselt.

Dieses Ereignis wird an das Element gesendet, das in den oder aus dem Vollbildmodus wechselt.

Um herauszufinden, ob das Element in den Vollbildmodus wechselt oder ihn verlässt, überprüfen Sie den Wert von Document.fullscreenElement: Wenn dieser Wert null ist, verlässt das Element den Vollbildmodus, andernfalls tritt es in den Vollbildmodus ein.

Dieses Ereignis kann nicht abgebrochen werden.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder legen Sie eine Ereignis-Handler-Eigenschaft fest.

addEventListener("fullscreenchange", (event) => { })

onfullscreenchange = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

In diesem Beispiel wird ein Handler für das fullscreenchange-Ereignis zu dem Element hinzugefügt, dessen ID fullscreen-div ist.

Wenn der Benutzer auf die Schaltfläche "Vollbildmodus umschalten" klickt, wird der click-Handler den Vollbildmodus für das div umschalten. Wenn document.fullscreenElement einen Wert hat, wird der Vollbildmodus verlassen. Andernfalls wird das div in den Vollbildmodus gesetzt.

Denken Sie daran, dass zum Zeitpunkt der Bearbeitung des fullscreenchange-Ereignisses der Status des Elements bereits geändert wurde. Also, wenn die Änderung in den Vollbildmodus ist, zeigt document.fullscreenElement auf das Element, das sich jetzt im Vollbildmodus befindet. Andererseits hat, wenn document.fullscreenElement null ist, der Vollbildmodus abgebrochen.

Das bedeutet für den Beispielcode, dass der fullscreenchange-Handler, wenn sich ein Element derzeit im Vollbildmodus befindet, die id des Vollbildelements in der Konsole protokolliert. Wenn document.fullscreenElement null ist, protokolliert der Code eine Nachricht, dass die Änderung darin besteht, den Vollbildmodus zu verlassen.

HTML

html

<h1>fullscreenchange event example</h1>
<div id="fullscreen-div">
  <button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
</div>

JavaScript

function fullscreenchangeHandler(event) {
  // document.fullscreenElement will point to the element that
  // is in fullscreen mode if there is one. If not, the value
  // of the property is null.
  if (document.fullscreenElement) {
    console.log(
      `Element: ${document.fullscreenElement.id} entered fullscreen mode.`,
    );
  } else {
    console.log("Leaving fullscreen mode.");
  }
}

const el = document.getElementById("fullscreen-div");

el.addEventListener("fullscreenchange", fullscreenchangeHandler);
// or
el.onfullscreenchange = fullscreenchangeHandler;

// When the toggle button is clicked, enter/exit fullscreen
document
  .getElementById("toggle-fullscreen")
  .addEventListener("click", (event) => {
    if (document.fullscreenElement) {
      // exitFullscreen is only available on the Document object.
      document.exitFullscreen();
    } else {
      el.requestFullscreen();
    }
  });

Spezifikationen

Specification
Fullscreen API # handler-document-onfullscreenchange