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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onfullscreenchange | Chrome Full support 45 | Edge Full support 12 | Firefox
Full support
64
| IE
Full support
11
| Opera Full support Yes | Safari ? | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android
Full support
64
| Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.