Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM fullscreenEnabled() method
The HTML DOM fullscreenEnabled property is a read-only boolean property that determines whether fullscreen mode is available for the current document. It returns true if fullscreen mode is supported and allowed, otherwise it returns false.
This property is useful for checking fullscreen support before attempting to enter fullscreen mode, providing a better user experience by preventing errors when fullscreen functionality is not available.
Syntax
Following is the syntax for the fullscreenEnabled property −
document.fullscreenEnabled
Return Value
The fullscreenEnabled property returns −
- true − If fullscreen mode is available and allowed for the document
- false − If fullscreen mode is not supported or is disabled
Browser Compatibility
Different browsers use vendor prefixes for fullscreen support. Here are the browser-specific property names −
| Browser | Property Name |
|---|---|
| Standard (Modern browsers) | document.fullscreenEnabled |
| Chrome, Safari, Opera | document.webkitFullscreenEnabled |
| Firefox | document.mozFullScreenEnabled |
| Internet Explorer/Edge | document.msFullscreenEnabled |
Example − Checking Fullscreen Support
Following example demonstrates how to check if fullscreen mode is available −
<!DOCTYPE html>
<html>
<head>
<title>fullscreenEnabled Property Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>fullscreenEnabled Property</h1>
<p>Click the button below to check if fullscreen mode is available:</p>
<button onclick="checkFullscreenSupport()" style="padding: 10px 20px; font-size: 16px;">CHECK FULLSCREEN SUPPORT</button>
<p id="result" style="margin-top: 20px; font-size: 18px; font-weight: bold;"></p>
<script>
function checkFullscreenSupport() {
var fullscreenSupported = (
document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
);
var resultElement = document.getElementById("result");
if (fullscreenSupported) {
resultElement.innerHTML = "? This document can be viewed in fullscreen mode.";
resultElement.style.color = "green";
} else {
resultElement.innerHTML = "? This document cannot be viewed in fullscreen mode.";
resultElement.style.color = "red";
}
}
</script>
</body>
</html>
The output will display a message indicating whether fullscreen mode is supported −
? This document can be viewed in fullscreen mode. (or) ? This document cannot be viewed in fullscreen mode.
Example − Cross-Browser Fullscreen Detection
Following example shows a more comprehensive approach to detect fullscreen support across different browsers −
<!DOCTYPE html>
<html>
<head>
<title>Cross-Browser Fullscreen Detection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Fullscreen Support Detection</h2>
<button onclick="detectFullscreenSupport()" style="padding: 10px 15px;">Detect Support</button>
<div id="info" style="margin-top: 15px;"></div>
<script>
function detectFullscreenSupport() {
var info = document.getElementById("info");
var supportDetails = [];
if (document.fullscreenEnabled) {
supportDetails.push("Standard fullscreenEnabled: ?");
}
if (document.webkitFullscreenEnabled) {
supportDetails.push("Webkit fullscreenEnabled: ?");
}
if (document.mozFullScreenEnabled) {
supportDetails.push("Mozilla fullScreenEnabled: ?");
}
if (document.msFullscreenEnabled) {
supportDetails.push("Microsoft fullscreenEnabled: ?");
}
if (supportDetails.length > 0) {
info.innerHTML = "<h3>Fullscreen Support Found:</h3><ul><li>" +
supportDetails.join("</li><li>") + "</li></ul>";
} else {
info.innerHTML = "<h3 style='color: red;'>No fullscreen support detected</h3>";
}
}
</script>
</body>
</html>
This example provides detailed information about which fullscreen properties are supported by the current browser.
Practical Use Case
The fullscreenEnabled property is commonly used before attempting to enter fullscreen mode to prevent errors. Here's how it works in practice −
function enterFullscreen() {
// Check if fullscreen is supported before attempting
if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen();
}
} else {
alert("Fullscreen mode is not supported in this browser.");
}
}
Key Points
- The property is read-only and returns a boolean value
- Always check fullscreen support before attempting to enter fullscreen mode
- Use vendor prefixes for maximum browser compatibility
- Fullscreen support may be disabled by browser security settings or user preferences
- The property checks availability, not the current fullscreen state
Conclusion
The fullscreenEnabled property is essential for checking fullscreen support before implementing fullscreen functionality. Always use cross-browser detection with vendor prefixes to ensure your fullscreen features work across different browsers and provide appropriate fallbacks when fullscreen mode is not available.
176 Views
