What is Fullscreen API
Javascript Fullscreen API allows user to present his web content in fullscreen and exit fullscreen when desired.
Fullscreen API has below properties, methods and events.
Properties
- Document.fullscreen
- Document.fullscreenElement
- Document.onfullscreenchange
- Document.onfullscreenerror
Methods
- Document.exitFullscreen()
- Element.requestFullscreen()
Events
- fullscreenchange
- fullscreenerror
How to use it
HTML:
/* HTML code to use javascript full screen API */ <div> <button onclick="launchFullscreen(document.documentElement);" class="full-screen">Launch Fullscreen</button> <button onclick="exitFullscreen();" class="exit-full-screen">Hide Fullscreen</button> <button onclick="getAllProperties();" class="get-data">Dump Fullscreen Property Data</button> </div>
JAVASCRIPT:
Launch Full Screen:
/** * function which will make web page to full screen * @param {object} element - desired element to show it in full screen **/ function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); } }
Exit Full Screen:
/** * function to exit from full screen **/ function exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } }
Properties for Full Screen API:
/** * function to get properties of fullscreen API **/ function getAllProperties() { console.log("document.fullscreenElement is: ", document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement); console.log("document.fullscreenEnabled is: ", document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled); }
Full Screen Events
/** * Events of fullscreen API **/ document.addEventListener("fullscreenchange", function(e) { console.log("fullscreenchange event! ", e); }); document.addEventListener("mozfullscreenchange", function(e) { console.log("mozfullscreenchange event! ", e); }); document.addEventListener("webkitfullscreenchange", function(e) { console.log("webkitfullscreenchange event! ", e); }); document.addEventListener("msfullscreenchange", function(e) { console.log("msfullscreenchange event! ", e); });
References:
https://davidwalsh.name/demo/fullscreen.php
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
Live Example: