The fullscreenchange
event is fired immediately after the browser switches into or out of fullscreen mode.
The event is sent to the Element
that is transitioning into or out of fullscreen mode, and this event then bubbles up to the Document
.
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.
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("fullscreenchange", (event) => {});
onfullscreenchange = (event) => {};
In this example, a handler for the fullscreenchange
event is added to the Document
.
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
<h1>fullscreenchange event example</h1>
<div id="fullscreen-div">
<button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
<pre id="logger"></pre>
</div>
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
const logger = document.querySelector("#logger");
const fullScreenElement = document.querySelector("#fullscreen-div");
function log(message) {
logger.textContent = `${logger.textContent}\n${message}`;
}
function fullscreenchanged(event) {
if (document.fullscreenElement) {
log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
} else {
log("Leaving fullscreen mode.");
}
}
document.addEventListener("fullscreenchange", fullscreenchanged);
document.getElementById("toggle-fullscreen").addEventListener("click", () => {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
fullScreenElement.requestFullscreen();
}
});