3

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

我尝试查找和测试许多 stackoverflow 答案，但没有一个对我有帮助。我想反转/取消用户完成的 F11 按键的全屏效果。

这是我创建的演示，您可以在其中看到问题代码沙箱，在此沙箱中只需在新的单独窗口/选项卡中打开输出，然后按 F11 将激活全屏，现在尝试按我提供的“转到全屏”，这是无法退出全屏效果。

4

1 回答 1

0

我已经尝试过这种方法，它在我的尝试中运行良好，我在下面添加了代码，我还在你的代码沙箱中创建了一个名为“test.html”的新文件，这也是结果链接。希望这将是您的麻烦的解决方案。

<!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>
于 2022-02-02T10:37:26.680 回答