fullscreenchange Event
Example
Display some text when the page is viewed in fullscreen mode:
document.addEventListener("fullscreenchange", function() {
output.innerHTML = "fullscreenchange event fired!";
});
Try it Yourself »
Definition and Usage
The fullscreenchange event occurs when an element is viewed in fullscreen mode.
Note: This event requires specific prefixes to work in different browsers (see Browser Support below).
Tip: Use the element.requestFullscreen() method to view an element in fullscreen mode.
Tip: Use the element.exitFullscreen() method to cancel fullscreen mode.
Browser Support
The numbers in the table specify the first browser version that fully supports the event. Note: Each browser requires a specific prefix (see parentheses):
| Event | |||||
|---|---|---|---|---|---|
| fullscreenchange | 45.0 (webkit) | 11.0 (ms) | 47.0 (moz) | 5.1 (webkit) | 15.0 (webkit) |
Example
Using prefixes for cross-browser code:
/* Standard syntax */
document.addEventListener("fullscreenchange",
function() {
...
});
/* Firefox */
document.addEventListener("mozfullscreenchange", function() {
...
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenchange",
function() {
...
});
/* IE / Edge */
document.addEventListener("msfullscreenchange", function() {
...
});
Try it Yourself »
Syntax
In HTML:
<element onfullscreenchange="myScript">
In JavaScript:
object.onfullscreenchange = function(){myScript};
In JavaScript, using the addEventListener() method:
object.addEventListener("fullscreenchange", myScript);
Try it Yourself »
Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.
Technical Details
| Bubbles: | Yes |
|---|---|
| Cancelable: | No |
| Event type: | Event |
| Supported HTML tags: | ALL HTML elements |
