CODEWITHSUNDEEP
javascripthtml5-fullscreen
Sara Ree
Sara Ree

Reputation: 3543

Exit fullscreen not working on chrome? [What I'm missing?]

I have two buttons on my screen. each one fires a piece of javascript code to enter and exit fullscreen mode.

Button 1: Enter Fullscreen Mode

Button 2: Exit Fullscreen Mode

If I first click on Button 1 it brings me to fullscreen mode and then if I click on Button 2 it'll exit fullscreen mode.

BUT if I enter fullscreen mode using F11 or via chrome menu, unexpectedly Button 2 doesn't work anymore.

Why this happens and how to fix it?

Button 1 code :

goFullscreen();
function goFullscreen() {
    var el = document.documentElement,
      rfs = el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen 
    ;

    rfs.call(el);
}

Button 2 code :

document.webkitCancelFullScreen();

I've tried this with no luck too:

document.webkitExitFullscreen();

Upvotes: 5

Views: 3482

Answers (1)

Ravi Makwana
Ravi Makwana

Reputation: 2918

You should validate before executing....

    function FullScreen(divID) {
        fnFullScreen(divID, !IsFullScreen());
    }
    function IsFullScreen() {
        return (document.fullscreenElement && document.fullscreenElement !== null) ||
                 (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
                 (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
                 (document.msFullscreenElement && document.msFullscreenElement !== null);
    }
    function fnFullScreen(divID, TurnOn) { 
        if (TurnOn) {
            var docElm = $('#' + divID).parent()[0];
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            } else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            } else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            } else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
            $('#' + divID).css("min-height", "100vh");
            $('.btnFullScreen').html('Exit Full Screen');
        } else { 
            if (document.exitFullscreen) {
                document.exitFullscreen().catch(() => { });
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
             
            $('#' + divID).css("min-height", "");
            $('.btnFullScreen').html('Full Screen');
        }
    }
 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <div class="body">
   <div id="div1"> <button class="btnFullScreen"  onclick="FullScreen('div1')">Full Screen</button> click to full screen</div>
   </div>

Upvotes: 2

Related Questions