The Element
interface's
onfullscreenchange
property is an event handler for the
fullscreenchange
event that is fired when the element has transitioned
into or out of full-screen mode.
Syntax
targetDocument.onfullscreenchange = fullscreenChangeHandler;
Value
An event handler for the fullscreenchange
event, indicating that the
element has changed in or out of full-screen mode.
Example
This example establishes a fullscreenchange
event handler,
handleFullscreenChange()
. This function determines which element it was
called on by checking the value of event.target
, then compares the
document's fullscreenElement
value to the
element to see if they're the same node.
This gives us a value, isFullscreen
, which we pass into a function called
adjustMyControls()
, which we imagine to be a function that makes
adjustments to the app's user interface to present itself optimally when it's in
full-screen mode versus being displayed in a window.
function toggleFullscreen() {
let elem = document.querySelector("video");
elem.onfullscreenchange = handleFullscreenChange;
if (!document.fullscreenElement) {
elem.requestFullscreen().then({}).catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
function handleFullscreenChange(event) {
let elem = event.target;
let isFullscreen = document.fullscreenElement === elem;
adjustMyControls(isFullscreen);
}
Specifications
Specification | Status | Comment |
---|---|---|
Fullscreen API The definition of 'onfullscreenchange' in that specification. |
Living Standard | Initial definition. |
Browser compatibility
BCD tables only load in the browser