Introduction
In modern web applications, providing a fullscreen experience can significantly enhance user engagement and give an immersive experience, especially for video content, gaming, and interactive websites. In JavaScript, you can check if the current window is in fullscreen mode, request fullscreen mode, and even exit from it. This tutorial will guide you through several techniques and code examples to work with fullscreen mode in JavaScript.
Understanding Fullscreen API
The Fullscreen API provides functions to enter and exit full-screen mode in the browser. It allows a web page to request full-screen display and lets a document element (<html>, <body>, or any other element) to be displayed in full screen. Knowing whether the current window is in fullscreen mode can be useful for adjusting your application’s UI and behavior accordingly.
The essential parts of the Fullscreen API include:
requestFullscreen(): This method requests the browser to display an element in full screen.exitFullscreen(): This method asks the browser to exit full screen if it’s currently displayed in such mode.document.fullscreenElement: Returns the element that is currently in full screen; returns null if no elements are in full screen.
Checking if the Current Window is Fullscreen
You can determine if your page or an element is currently in fullscreen mode by checking the document.fullscreenElement. If this property is not null, it means some element (possibly the document itself) is in fullscreen mode. Here’s how you can check:
if (document.fullscreenElement != null) {
console.log('We are in fullscreen mode!');
} else {
console.log('We are not in fullscreen mode.');
}
Requesting Fullscreen Mode
To request fullscreen mode for an element, you can use the requestFullscreen method. This method should be triggered by a user action, like a click event, to avoid being blocked by the browser. Here’s an example to make the entire HTML document go full screen:
document.documentElement.requestFullscreen().catch((e) => {
console.error('Error attempting to enable full-screen mode:', e);
});
Here, document.documentElement represents the <html> element. You can replace this with any other element you want to display in full screen.
Exiting Fullscreen Mode
To exit fullscreen, you can call exitFullscreen on the document:
document.exitFullscreen().catch((e) => {
console.error('Error attempting to exit full-screen mode:', e);
});
Listening to Fullscreen Change Events
It’s also possible to listen for changes to fullscreen status. The browser emits events when entering or exiting fullscreen mode. You can listen to these events using addEventListener:
document.addEventListener('fullscreenchange', (event) => {
if (document.fullscreenElement) {
console.log('Entered fullscreen mode');
} else {
console.log('Exited fullscreen mode');
}
});
Cross-Browser Compatibility
It’s important to mention that browsers have different prefixes for the Fullscreen API methods and properties, especially on older versions. For comprehensive support, you may need to use vendor prefixes or feature detection. Here’s a quick example of how to handle this:
function toggleFullScreen() {
if (!document.fullscreenElement && // standard
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // Vendor prefixes
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) { // Firefox
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) { // IE/Edge
document.documentElement.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
}
}
By using the Fullscreen API thoughtfully, you can create engaging and immersive web experiences that adapt to users’ preferences for fullscreen viewing. Remember to always respect the user’s choice and provide clear indicators for entering and exiting fullscreen mode.
Finally, it’s worth practicing with the Fullscreen API and exploring the boundaries of what’s possible. Engage your users by thoughtfully integrating fullscreen features into your web projects where it makes sense.
