W3cubDocs

Element: fullscreenchange event

The fullscreenchange event is fired immediately after an Element switches into or out of fullscreen mode.

This event is sent to the Element which is transitioning into or out of fullscreen mode.

To find out whether the Element is entering or exiting fullscreen mode, check the value of Document.fullscreenElement: if this value is null then the element is exiting fullscreen mode, otherwise it is entering fullscreen mode.

This event is not cancelable.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

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

onfullscreenchange = (event) => {};

Event type

A generic Event.

Examples

In this example, a handler for the fullscreenchange event is added to the element whose ID is fullscreen-div.

If the user clicks on the "Toggle Fullscreen Mode" button, the click handler will toggle fullscreen mode for the div. If document.fullscreenElement has a value it will exit fullscreen mode. If not, the div will be placed into fullscreen mode.

Remember that by the time the fullscreenchange event is handled, the status of the element has already changed. So if the change is to fullscreen mode, document.fullscreenElement will point to the element that is now in fullscreen mode. On the other hand, if document.fullscreenElement is null, fullscreen mode has been canceled.

What that means to the example code is that, if an element is currently in fullscreen mode, the fullscreenchange handler logs the id of the fullscreen element to the console. If document.fullscreenElement is null, the code logs a message that the change is to leave fullscreen mode.

HTML

html

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

JavaScript

function fullscreenchanged(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", fullscreenchanged);
// or
el.onfullscreenchange = fullscreenchanged;

// 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();
    }
  });

Specifications

Specification
Fullscreen API Standard # handler-document-onfullscreenchange

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`fullscreenchange_event`	7115	791212–14	6410	No	581512.1–15	16.45.1	71≤37	7118	6410	501412.1–14	12 Only available on iPad, not on iPhone.	10.01.0