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

Question

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

593 Views Asked by Jaydip Sapariya At 12 January 2022 at 09:07

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.

Original Q&A

There are 1 best solutions below

**Dhaval Samani** · Accepted Answer · 2022-02-02T10:37:26.680000

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>

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

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML5-FULLSCREEN

Related Questions in WEBKITREQUESTFULLSCREEN

Trending Questions

Popular # Hahtags

Popular Questions