javascripthtml5-fullscreenwebkitrequestfullscreen

How to get out of fullscreen which is activated by pressing F11

I need feature of activating fullscreen and deactivating fullscreen and every thing works great when i use document.requestFullScreen and document.cancelFullScreen API. But when user activate fullscreen using F11 then document.cancelFullScreen API doesn't work as i wants.

I tried finding and testing many stackoverflow answers but none of those helped me. I wants to reverse/cancel the fullscreen effect of F11 key press done by user.

Here is demo i created where you can see that issue code sand box ,in this sandbox just open output in new separate window/tab, then press F11 which will activate fullscreen, now try to press 'Go Fullscreen' i provided which is not able to exit fullscreen effect.

Solution

  • I have tried this method it is working fine as on my try, I have add code bellow, also I have create new file in your code sand box called "test.html", and also here is the result link. Hope it will be the solution for your trouble.

    <!DOCTYPE html>
<html>
  <head>
    <style>
      .full-container {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div id="full-container" class="full-container">
      Open this page in New Window to see effect of button
      <button onclick="goFullscreen()">go FullScreen</button>
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var fullScreenMod = false;

    $(document).on("keydown", function (ev) {
      if (ev.keyCode === 27 || ev.keyCode === 122) {
        goFullscreen();
        return false;
      }
    });

    /* Standard syntax */
    document.addEventListener("fullscreenchange", function () {
      fullScreenMod = !fullScreenMod;
    });

    /* Firefox */
    document.addEventListener("mozfullscreenchange", function () {
      fullScreenMod = !fullScreenMod;
    });

    /* Chrome, Safari and Opera */
    document.addEventListener("webkitfullscreenchange", function () {
      fullScreenMod = !fullScreenMod;
    });

    /* IE / Edge */
    document.addEventListener("msfullscreenchange", function () {
      fullScreenMod = !fullScreenMod;
    });

    function goFullscreen() {
      console.log("fullscreen called");
      let topContainer = document.getElementById("full-container");
      let isWholeFullScreen = fullScreenMod;
      if (isWholeFullScreen == false) {
        isWholeFullScreen = !isWholeFullScreen;
        if (topContainer.requestFullScreen) {
          topContainer.requestFullScreen();
        } else if (topContainer.mozRequestFullScreen) {
          topContainer.mozRequestFullScreen();
        } else if (topContainer.webkitRequestFullScreen) {
          topContainer.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (topContainer.msRequestFullscreen) {
          topContainer.msRequestFullscreen();
        }
      } else {
        isWholeFullScreen = !isWholeFullScreen;
        if (document.exitFullScreen) {
          document.exitFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
    }
  </script>
</html>