The fullscreenchange
event is fired immediately after an Element
switches into or out of full-screen mode.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | Event |
Event handler property | onfullscreenchange |
This event is sent to the Element
which is transitioning into or out of full-screen mode.
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 full-screen mode for the div
. If document.fullscreenElement
has a value it will exit full-screen mode. If not, the div will be placed into full-screen 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 full-screen mode, document.fullscreenElement
will point to the element that is now in full-screen mode. On the other hand, if document.fullscreenElement
is null, full-screen mode has been canceled.
What that means to the example code is that, if an element is currently in full-screen mode, the fullscreenchange
handler logs the id
of the full-screen element to the console. If document.fullscreenElement
is null, the code logs a message that the change is to leave full-screen mode.
HTML
<h1>fullscreenchange event example</h1> <div id="fullscreen-div"> <button id="toggle-fullscreen">Toggle Fullscreen Mode</button> </div>
JavaScript
document.getElementById('fullscreen-div').addEventListener('fullscreenchange', (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 full-screen mode.'); } }); document.getElementById('toggle-fullscreen').addEventListener('click', (event) => { if (document.fullscreenElement) { // exitFullscreen is only available on the Document object. document.exitFullscreen(); } else { document.getElementById('fullscreen-div').requestFullscreen(); } });
Specifications
Specification | Status |
---|---|
Fullscreen API | Living Standard |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fullscreenchange event | Chrome Full support 57 | Edge Full support ≤79 | Firefox
Full support
64
| IE ? | Opera Full support 44 | Safari ? | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox Android
Full support
64
| Opera Android Full support 43 | Safari iOS ? | Samsung Internet Android Full support 7.0 |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- Uses a non-standard name.
- Uses a non-standard name.