Dokument: 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 ausgelöst, sobald der Browser in den Vollbildmodus wechselt oder diesen verlässt.

Das Ereignis wird an das Element gesendet, das in den oder aus dem Vollbildmodus wechselt. Dieses Ereignis "blubbert" dann bis zum Document hoch.

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

Dieses Ereignis kann nicht abgebrochen werden.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.

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

onfullscreenchange = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Protokollierung von fullscreenchange Ereignissen

In diesem Beispiel wird ein Handler für das fullscreenchange Ereignis zum Document hinzugefügt.

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

Denken Sie daran, dass der Status des Elements bereits geändert wurde, wenn das fullscreenchange Ereignis behandelt wird. Wenn die Änderung in den Vollbildmodus erfolgt, zeigt document.fullscreenElement auf das Element, das sich nun im Vollbildmodus befindet. Andererseits, wenn document.fullscreenElement null ist, wurde der Vollbildmodus abgebrochen.

Das bedeutet für den Beispielcode, dass, wenn ein Element derzeit im Vollbildmodus ist, der fullscreenchange-Handler die id des Vollbildelements in die 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>
  <pre id="logger"></pre>
</div>

CSS

css
* {
  box-sizing: border-box;
}

#fullscreen-div {
  height: 150px;
  padding: 1rem;
  background-color: pink;
}

#logger {
  height: 80px;
  padding: 0 0.5rem;
  background-color: white;
  overflow: scroll;
}

JavaScript

js
const logger = document.querySelector("#logger");
const fullScreenElement = document.querySelector("#fullscreen-div");

function log(message) {
  logger.textContent = `${logger.textContent}\n${message}`;
}

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

document.addEventListener("fullscreenchange", fullscreenchangeHandler);

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

Spezifikationen

Specification
Fullscreen API
# handler-document-onfullscreenchange

Browser-Kompatibilität

Siehe auch