如何退出按下F11键后激活的全屏模式

Question

如何退出按下F11键后激活的全屏模式

javascripthtml5-fullscreenwebkitrequestfullscreen

3

我需要实现激活全屏和取消全屏功能，并且当我使用document.requestFullScreen和document.cancelFullScreen API时一切都很好。但是当用户使用F11激活全屏时，document.cancelFullScreen API无法按照我的要求正常工作。

我尝试了许多stackoverflow答案，但没有一个能帮助我。我想要反转/取消用户通过F11键按下的全屏效果。

这里是我创建的演示，在此沙盒中可以看到该问题code sand box，在该沙盒中只需将输出打开到新的单独窗口/选项卡中，然后按下F11即可激活全屏，现在尝试按下提供的 'Go Fullscreen'，它无法退出全屏效果。

- Jaydip Sapariya

1

因为它是document.exitFullScreen()而不是document.cancelFullScreen()。 - Dhana D.

谢谢您的回复！但我尝试过了，仍然得到相同的行为。 - Jaydip Sapariya

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dhaval Samani · 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>