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...