HTML | DOM fullscreenchange Event
Last Updated :
27 Apr, 2023
The fullscreenchange event occurs when a user viewed an element in fullscreen mode. The element.requestFullscreen() method is used to view an element in fullscreen mode and the element.exitFullscreen() method to cancel fullscreen mode.
Supported Tags
- It supports all HTML elements.
Syntax:
<element onfullscreenchange="myScript">
object.onfullscreenchange = function(){myScript};
- In JavaScript, using the addEventListener() method:
object.addEventListener("fullscreenchange", myScript);
The below examples illustrate the fullscreenchange Event in HTML DOM:
Example 1: This example illustrates HTML DOM fullscreenchange event.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body onfullscreenchange="function()">
<center>
<h1 id="geeks" style="color:green;">
GeeksforGeeks</h1>
<h3>Fullscreen with JavaScript</h3>
<p>Click on the button to open this
page in fullscreen mode.</p>
<button onclick="openFullscreen();">
Fullscreen Mode</button>
<button onclick="closeFullscreen();">
Close Fullscreen or press "Esc"</button>
<script>
var gfg = document.documentElement;
function openFullscreen() {
if (gfg.requestFullscreen) {
gfg.requestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
</script>
</body>
</html>
|
Output:
Example 2: This example uses JavaScript for fullscreenchange event.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<center>
<h1 id="geeks" style="color:green;">
GeeksforGeeks
</h1>
<h3>Fullscreen with JavaScript</h3>
<p>Click on the button to open this
page in fullscreen mode.
</p>
<button onclick="openFullscreen();">
Fullscreen Mode
</button>
<button onclick="closeFullscreen();">
Close Fullscreen or pres "Esc"
</button>
<script>
var gfg = document.documentElement;
function openFullscreen() {
if (gfg.requestFullscreen) {
gfg.requestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
var output = document.getElementById("geeks");
document.onfullscreenchange(function () {
});
</script>
</body>
</html>
|
Output:
Example 3: This example uses addEventListener() method for fullscreenchange event.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<center>
<h1 id="geeks" style="color:green;">
GeeksforGeeks</h1>
<h3>Fullscreen with JavaScript</h3>
<p>Click on the button to open this
page in fullscreen mode.
</p>
<button onclick="openFullscreen();">
Fullscreen Mode
</button>
<button onclick="closeFullscreen();">
Close Fullscreen or pres "Esc"
</button>
<script>
var gfg = document.documentElement;
function openFullscreen() {
if (gfg.requestFullscreen) {
gfg.requestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
var output = document.getElementById("geeks");
document.addEventListener("fullscreenchange", function () {
output.innerHTML = "A computer science portal for geeks";
});
</script>
</body>
</html>
|
Output:
- Google Chrome 45.0
- Internet Explorer 11.0
- Firefox 47.0
- Apple Safari 5.1
- Opera 15.0
Share your thoughts in the comments
Please Login to comment...