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

Question

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();

Possible duplicate of [How to exit fullscreen onclick using Javascript?](https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript) — zero298, Nov 28 '18 at 20:54
Try document.webkitExitFullscreen(); instead of document.webkitCancelFullScreen(); https://stackoverflow.com/a/36672683/6358346 — Grant Foster, Nov 28 '18 at 20:56
I'm sorry but document.webkitExitFullscreen(); doesn't work too, I'm totally confused :( — Sara Ree, Nov 28 '18 at 20:59
The link just recommended to use document.webkitExitFullscreen(); Am I right? — Sara Ree, Nov 28 '18 at 21:01
Possible duplicate of [After enabling full screen through f11 disable full screen through javascript](https://stackoverflow.com/questions/51128490) — Jeremy, Nov 28 '18 at 21:07
So according to this link, it is not possible to make this functionality on chrome? — Sara Ree, Nov 28 '18 at 21:13
@SaraRee There is also `document.webkitCancelFullScreen` however you missed a *critical* clarification here: are you trying to detect the event when the user has exited fullscreen or are trying to give them an anchor or button to press that exits fullscreen? That is absolutely critical for you to get the correct answer. — John, Aug 19 '19 at 10:14
@SaraRee Also try the following: https://stackoverflow.com/a/25876513/606371 — John, Aug 19 '19 at 10:17

score 2 · Answer 1 · answered Sep 23 '19 at 10:28

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>

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

1 Answers1