The fullscreenEnabled() method in HTML DOM is used to check whether the document can be viewed in full-screen mode or not. It returns a single read-only Boolean value. This method may require specific prefixes to work with different browsers.
Syntax
document.fullscreenEnabled()Parameters: This method does not accept any parameters.
Return Value: It returns a boolean value:
- True: If the document can be viewed in full-screen mode.
- False: If the document cannot be viewed in full-screen mode.
Example 1 :
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM fullscreenEnabled() method
</title>
<!-- script to check full screen enabled or not -->
<!--Driver Code Ends-->
<script>
function requestFullScreen() {
let isFullscreenSupported =
/* Standard syntax */
(document.fullscreenEnabled ||
/* Chrome, Safari and Opera */
document.webkitFullscreenEnabled ||
/* Firefox */
document.mozFullScreenEnabled ||
/* IE/Edge */
document.msFullscreenEnabled);
document.querySelector('.isSupported').innerHTML
= isFullscreenSupported;
}
</script>
<!--Driver Code Starts-->
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
fullscreenEnabled() method
</h2>
<!-- script called here -->
<button onclick="requestFullScreen();">
Check fullscreen supported
</button>
<p>Fullscreen support:</p>
<div class="isSupported"></div>
</body>
</html>
<!--Driver Code Ends-->
Example 2 :
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM fullscreenEnabled() method
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
HTML DOM fullscreenEnabled() method
</h2>
<img id="image" src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" />
<br>
<!--Driver Code Ends-->
<button onclick="goFullScreen();">Fullscreen</button>
<script>
function goFullScreen() {
if (
/* Standard syntax */
document.fullscreenEnabled ||
/* Chrome, Safari and Opera */
document.webkitFullscreenEnabled ||
/* Firefox */
document.mozFullScreenEnabled ||
/* IE/Edge */
document.msFullscreenEnabled
) {
elem = document.querySelector('#image');
elem.requestFullscreen();
}
else {
console.log('Fullscreen not enabled')
}
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- Checks more than just browser support : It returns false not only if the browser doesn’t support fullscreen, but also if the page is restricted (e.g., inside an <iframe> without the allowfullscreen attribute, or when windowed plugins are present).
- Safe to read before requesting fullscreen : Using this property first prevents unnecessary errors when calling Element.requestFullscreen(), making it a best-practice guard in fullscreen-related code.
