onfullscreenchange
The onfullscreenchange event attribute defines a JavaScript function to run when the fullscreen mode of the document or an element is toggled.
onfullscreenchange Event
The onfullscreenchange property of the Element interface serves as an event handler that activates when an element transitions into or out of fullscreen mode.
Syntax
In HTML
index.html
<element onfullscreenchange="myScript">
In JS
script.js
object.onfullscreenchange = function(){myScript};
In JavaScript, the addEventListener() function is used.
script.js
object.addEventListener("fullscreenchange", myScript);
Example
::event-screen
::
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myP {
background-color: yellow;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Click on the button to open this page in fullscreen mode.</p>
<button onclick="openFullscreen();">Go Fullscreen Mode</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<p id="myP">I will display the event that was fired!</p>
<p>Note: Internet Explorer 10 and earlier does not support fullscreen mode.</p>
</body>
</html>
/* Get the element you want displayed in fullscreen */
var elem = document.documentElement;
/* Function to open fullscreen mode */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem = window.top.document.body; //To break out of frame in IE
elem.msRequestFullscreen();
}
}
/* Function to close fullscreen mode */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
window.top.document.msExitFullscreen();
}
}
// Events
var output = document.getElementById("myP");
document.addEventListener("fullscreenchange", function() {
output.innerHTML = "fullscreenchange event fired!";
});
document.addEventListener("mozfullscreenchange", function() {
output.innerHTML = "mozfullscreenchange event fired!";
});
document.addEventListener("webkitfullscreenchange", function() {
output.innerHTML = "webkitfullscreenchange event fired!";
});
document.addEventListener("msfullscreenchange", function() {
output.innerHTML = "msfullscreenchange event fired!";
});
This event may require browser-specific prefixes for full compatibility across different browsers.
Conclusion
The onfullscreenchange event is triggered whenever an element enters or exits fullscreen mode. It enables the execution of scripts in response to changes in fullscreen state. Ensure compatibility by considering browser-specific prefixes.