HTML DOM fullscreenEnabled() Method

Last Updated : 02 Sep, 2024

The fullscreenEnabled() method in HTML DOM is used to check whether the document can be viewed in full-screen mode or not. It returns a single read-only Boolean value. This method may require specific prefixes to work with different browsers.

Syntax:

document.fullscreenEnabled()

Parameters: This method does not accept any parameters.

Return Value: It returns a boolean value:

True: If the document can be viewed in full-screen mode.
False: If the document cannot be viewed in full-screen mode.

Example 1:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM fullscreenEnabled() method
    </title>

    <!-- script to check full screen enabled or not -->
    <script>
        function requestFullScreen() {
            let isFullscreenSupported =

                /* Standard syntax */
                (document.fullscreenEnabled ||

                    /* Chrome, Safari and Opera */
                    document.webkitFullscreenEnabled ||

                    /* Firefox */
                    document.mozFullScreenEnabled ||

                    /* IE/Edge */
                    document.msFullscreenEnabled);

            document.querySelector('.isSupported').innerHTML
                = isFullscreenSupported;
        }
    </script>
</head>

<body>
    <h1>
        GeeksforGeeks
    </h1>

    <h2>
        fullscreenEnabled() method
    </h2>

    <!-- script called here -->
    <button onclick="requestFullScreen();">
        Check fullscreen supported
    </button>

    <p>Fullscreen support:</p>

    <div class="isSupported"></div>

</body>

</html>

Output: check_fullscreen_output

Example 2:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM fullscreenEnabled() method
    </title>

    <!-- script to enable full screen -->
    <script>
        function goFullScreen() {
            if (

                /* Standard syntax */
                document.fullscreenEnabled ||

                /* Chrome, Safari and Opera */
                document.webkitFullscreenEnabled ||

                /* Firefox */
                document.mozFullScreenEnabled ||

                /* IE/Edge */
                document.msFullscreenEnabled
            ) {
                elem = document.querySelector('#image');
                elem.requestFullscreen();
            }
            else {
                console.log('Fullscreen not enabled')
            }
        }
    </script>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>
        HTML DOM fullscreenEnabled() method
    </h2>

    <img id="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" />
    <br>

    <button onclick="goFullScreen();">
        Fullscreen
    </button>

</body>

</html>