|
In web development, there may be scenarios where you want to display your web application or a specific element in full-screen mode, covering the entire browser window. This can be useful for creating immersive experiences, such as games, presentations, or video players. JavaScript provides a built-in Fullscreen API that allows you to toggle the full-screen mode programmatically.
Approach- In this approach, we are using the Fullscreen API.
- The Fullscreen API provides a standardized way to control the full-screen mode of an element or the entire browser window. It consists of several methods and events that you can use to manage the full-screen state.
- The script attaches an event listener to the fullscreen button.
- It utilizes the Fullscreen API to enter and exit fullscreen mode based on the current state.
- The button text dynamically changes between “Enter Fullscreen” and “Exit Fullscreen” to reflect the current action.
Syntax:// Request full-screen mode
element.requestFullscreen();
// Exit full-screen mode
document.exitFullscreen();
// Check if the browser is in full-screen mode
document.fullscreenElement;
// Handle full-screen change events
document.addEventListener('fullscreenchange', function() {
// Code to execute when the full-screen state changes
}); Example: Implementation to change the browser to fullscreen by using the fullscreen API.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Fullscreen</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#fullscreenButton {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>
Click the button below
to toggle fullscreen mode:
</p>
<button id="fullscreenButton">
Enter Fullscreen
</button>
<script>
const fullscreenButton =
document.getElementById('fullscreenButton');
fullscreenButton.addEventListener('click', toggleFullscreen);
function toggleFullscreen() {
if (!document.fullscreenElement &&
!document.mozFullScreenElement &&
!document.webkitFullscreenElement &&
!document.msFullscreenElement) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
}
// Change button text to 'Exit Fullscreen'
fullscreenButton.textContent = 'Exit Fullscreen';
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
// Change button text to 'Enter Fullscreen'
fullscreenButton.textContent = 'Enter Fullscreen';
}
}
</script>
</body>
</html>
Output:
 Output
|
.png){kind=small}
