如何退出按F11激活的全屏

Question

我需要激活全屏和停用全屏的功能，当我使用 document.requestFullScreen 和 document.cancelFullScreen API 时，一切都很好。但是，当用户使用 F11 激活全屏时，document.cancelFullScreen API 无法正常工作。

我尝试查找和测试许多 Whosebug 答案，但其中 none 帮助了我。我想reverse/cancel用户做的F11按键全屏效果

这是我创建的演示，您可以在其中看到该问题 code sand box，在此沙箱中，只需在新的单独 window/tab 中打开输出，然后按 F11 将激活全屏，现在尝试按 'Go Fullscreen'我提供了无法退出全屏效果

Answer 1

我已经尝试过这个方法，它在我的尝试中工作正常，我在下面添加了代码，我还在你的代码沙盒中创建了一个名为“test.html”的新文件，这也是结果 link。希望能解决您的问题。

<!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>

如何退出按F11激活的全屏

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

javascript

html5-fullscreen

webkitrequestfullscreen