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 exitFullscreen() method
The HTML DOM exitFullscreen() method is used to exit fullscreen mode for an element that is currently displayed in fullscreen. This method is called on the document object, not on individual elements, and it returns a Promise that resolves when the element has exited fullscreen mode.
Syntax
Following is the syntax for the exitFullscreen() method −
document.exitFullscreen()
Return Value
The method returns a Promise that resolves to undefined when fullscreen mode is successfully exited. The Promise may be rejected if an error occurs during the exit process.
How It Works
The exitFullscreen() method works in conjunction with the requestFullscreen() method. When an element enters fullscreen mode using requestFullscreen(), you can exit that mode by calling document.exitFullscreen(). The method automatically exits fullscreen for whichever element is currently in fullscreen mode.
Key points about exitFullscreen() −
Must be called on the
documentobject, not on individual elementsOnly works if an element is currently in fullscreen mode
Requires user interaction to work (security restriction)
Returns a Promise for handling success or failure
Basic Example
Following example demonstrates basic usage of the exitFullscreen() method −
<!DOCTYPE html>
<html>
<head>
<title>exitFullscreen() Basic Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Fullscreen Demo</h1>
<div id="content" style="background-color: #f0f0f0; padding: 20px; border: 2px solid #333;">
<h2>Sample Content</h2>
<p>This content can be displayed in fullscreen mode.</p>
<img src="/html/images/tutorialspoint-logo.png" alt="Sample Image" style="max-width: 200px;">
</div>
<br>
<button onclick="enterFullscreen()">Enter Fullscreen</button>
<button onclick="exitFullscreen()">Exit Fullscreen</button>
<p id="status"></p>
<script>
function enterFullscreen() {
const element = document.getElementById('content');
if (element.requestFullscreen) {
element.requestFullscreen().then(() => {
document.getElementById('status').textContent = 'Entered fullscreen mode';
}).catch(err => {
document.getElementById('status').textContent = 'Error entering fullscreen: ' + err.message;
});
}
}
function exitFullscreen() {
if (document.fullscreenElement) {
document.exitFullscreen().then(() => {
document.getElementById('status').textContent = 'Exited fullscreen mode';
}).catch(err => {
document.getElementById('status').textContent = 'Error exiting fullscreen: ' + err.message;
});
} else {
document.getElementById('status').textContent = 'Not currently in fullscreen mode';
}
}
</script>
</body>
</html>
This example creates buttons to enter and exit fullscreen mode, with status messages to show the current state.
Complete Interactive Example
Following example shows a more comprehensive implementation with error handling and fullscreen change events −
<!DOCTYPE html>
<html>
<head>
<title>Complete exitFullscreen() Example</title>
<style>
.container {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
margin: 20px;
}
.controls {
margin: 20px;
text-align: center;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
}
button:hover { background-color: #0056b3; }
button:disabled { background-color: #cccccc; cursor: not-allowed; }
.status { font-weight: bold; color: #333; }
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h1>Advanced Fullscreen Control</h1>
<div id="fullscreenElement" class="container">
<h2>Fullscreen Content Area</h2>
<p>This entire container can enter fullscreen mode.</p>
<p>Press ESC key or use the Exit button to leave fullscreen.</p>
</div>
<div class="controls">
<button id="enterBtn" onclick="requestFullscreen()">Enter Fullscreen</button>
<button id="exitBtn" onclick="exitFullscreenMode()" disabled>Exit Fullscreen</button>
</div>
<div class="status">
<p>Status: <span id="statusText">Normal mode</span></p>
<p>Fullscreen element: <span id="elementText">None</span></p>
</div>
<script>
const enterBtn = document.getElementById('enterBtn');
const exitBtn = document.getElementById('exitBtn');
const statusText = document.getElementById('statusText');
const elementText = document.getElementById('elementText');
function requestFullscreen() {
const element = document.getElementById('fullscreenElement');
if (element.requestFullscreen) {
element.requestFullscreen()
.then(() => {
console.log('Successfully entered fullscreen mode');
})
.catch(err => {
statusText.textContent = 'Failed to enter fullscreen: ' + err.message;
});
} else {
statusText.textContent = 'Fullscreen API not supported';
}
}
function exitFullscreenMode() {
if (document.exitFullscreen) {
document.exitFullscreen()
.then(() => {
console.log('Successfully exited fullscreen mode');
})
.catch(err => {
statusText.textContent = 'Failed to exit fullscreen: ' + err.message;
});
} else {
statusText.textContent = 'exitFullscreen not supported';
}
}
// Listen for fullscreen changes
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) {
statusText.textContent = 'Fullscreen mode active';
elementText.textContent = document.fullscreenElement.id || 'Unknown element';
enterBtn.disabled = true;
exitBtn.disabled = false;
} else {
statusText.textContent = 'Normal mode';
elementText.textContent = 'None';
enterBtn.disabled = false;
exitBtn.disabled = true;
}
});
// Listen for fullscreen errors
document.addEventListener('fullscreenerror', function() {
statusText.textContent = 'Fullscreen error occurred';
});
</script>
</body>
</html>
This example includes event listeners for fullscreen changes, proper Promise handling, and dynamic button states based on the current fullscreen status.
Browser Compatibility and Error Handling
Not all browsers support the Fullscreen API. Always check for method availability and handle potential errors −
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Browser Compatibility</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Browser Compatibility Check</h1>
<button onclick="checkCompatibility()">Check Fullscreen Support</button>
<div id="results" style="margin-top: 20px; padding: 15px; background-color: #f9f9f9;"></div>
<script>
function checkCompatibility() {
const results = document.getElementById('results');
let html = '<h3>Fullscreen API Support:</h3><ul>';
// Check for standard methods
html += `<li>document.exitFullscreen: ${!!document.exitFullscreen}</li>`;
html += `<li>element.requestFullscreen: ${!!Element.prototype.requestFullscreen}</li>`;
html += `<li>document.fullscreenElement: ${!!document.hasOwnProperty('fullscreenElement')}</li>`;
// Check for vendor prefixes (older browsers)
html += `<li>document.webkitExitFullscreen: ${!!document.webkitExitFullscreen}</li>`;
html += `<li>document.mozCancelFullScreen: ${!!document.mozCancelFullScreen}</li>`;
html += `<li>document.msExitFullscreen: ${!!document.msExitFullscreen}</li>`;
html += '</ul>';
if (document.exitFullscreen) {
html += '<p style="color: green;"><strong>? Modern Fullscreen API supported</strong></p>';
} else if (document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen) {
html += '<p style="color: orange;"><strong>? Vendor-prefixed API available</strong></p>';
} else {
html += '<p style="color: red;"><strong>? 
102 Views
