Full-Screen Browser JavaScript API Tutorial

By Posted on

To make the Browser in full-screen mode, can be done with the JavaScript API. In some conditions, this feature is needed to display the contents of the browser to provide flexibility in viewing existing data. In this tutorial, we will learn how to create a full-screen browser javascript that is triggered by a single button using the JS programming language.

HTML Code

To make this feature, we need to create the HTML first and for the style I use Bootstrap. Here is a simple HTML code example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Browser</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
<div class="text-center">
	<button class="btn btn-primary" id="fullscreenToggle">Demo Fullscreen</button>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</html>

In the example above, we define a button with the ID “fullscreenToggle” which we will use to toggle full-screen mode on and off.

Javascript Code

After that, the ID “fullscreenToggle” will be read by JavaScript and will be used to control the behavior of the button and set the full-screen mode. Here is an example of JavaScript code that we can use: 

<script>
const fullscreenToggle = document.getElementById('fullscreenToggle');

fullscreenToggle.addEventListener('click', () => {
    toggleFullScreen();
});

function toggleFullScreen() {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch(err => {
            console.error(`Error attempting to enable full-screen mode: ${err.message}`);
        });
        fullscreenToggle.textContent = 'Demo Exit Fullscreen';
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
            fullscreenToggle.textContent = 'Demo Fullscreen';
        }
    }
}
</script>

In the code above, we define a function toggleFullScreen() which will enable or disable full-screen mode when the button is clicked. If full-screen mode is active, it will display the “Exit Fullscreen” button to exit full-screen mode.

Demo

Let’s find the code above, by pressing the following Fullscreen button: Fullscreen Browser


By following the steps above, we can create a button to enable and disable full-screen mode in web-based applications using JavaScript. This feature can improve the user experience and provide a more holistic view of your web content. Hopefully, this Full Screen Browser JavaScript Tutorial is useful.

Read more: