The FullScreen API allows you to present a web page or the different elements that make it up in full screen or FullScreen. Once the browser is in this mode, the browser informs and provides different options to exit this mode.
FullScreen API Properties
document.fullscreenEnabled
Before using this API it is advisable to check if the browser allows full screen mode and it can also be used to check the API support in the browser:
- true: If the browser allows full screen mode.
- false: Opposite case.
if (document.fullscreenEnabled) {
// resto del codigo
}FullScreen API Methods
element.requestFullscreen()
This method allows a single element to get full screen; for example, the image presented below:
It is very useful for when you want to highlight specific elements; the syntax would be the following:
var element = document.getElementById("image").requestFullscreen();document.exitFullscreen()
Being the antagonist of the element.requestFullscreen() method, this method cancels the FullScreen mode of the browser:
var element = document.getElementById("image");
element.exitFullscreen();document.fullscreenElement()
This other method returns all the elements of the document that is currently in full screen mode (NULL if there are no elements in this mode):
var element = document.getElementById("image");
element.fullscreenElement();An example of what could be returned in case of being in full screen mode:
<img id="img" src="tigre.png">FullScreen API Events
document.fullscreenchange
This event is executed every time full screen or FullScreen mode is entered and/or exited; its syntax is as follows:
document.addEventListener("fullscreenchange", function() {
// resto del codigo
});document.fullscreenerror
FullScreen mode may fail; for example when trying to grant full screen mode from an iframe.
FullScreen API Considerations
You must bear in mind that it is necessary to use the prefixes according to the browser and its version, that being said, the following code presented allows you to find the prefix used by the user's browser; and it presents some similarities with the one presented a few entries ago called: Using the Page Visibility API in JavaScript.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter