根据是否支持全屏以及是否已处于全屏模式显示文本答案

【问题标题】：Display text depending on whether fullscreen is supported and whether already in fullscreen mode or not根据是否支持全屏以及是否已处于全屏模式显示文本
【发布时间】：2020-09-22 05:29:28
【问题描述】：

我对 Javascript 很陌生。我正在尝试根据浏览器是否支持全屏以及它是否已经显示全屏来显示文本。在页面顶部，我添加了以下代码。但是，这似乎不起作用。它不显示任何内容。知道如何以不同的方式执行此操作吗？

<script type="text/javascript">
  document.addEventListener("fullscreenchange", function (event) {
      if (document.fullscreenElement) {
          document.write("Fullscreen already activated.");

      } else {
          displayButton();
      }
  });

  function displayButton () {
      if (document.fullscreenEnabled) {
            document.write("Open Fullscreen here");
      } else {
            document.write("Fullscreen not supported.");
      }
  };
</script>

【问题讨论】：

只有当fullscreenchange 事件被触发时，你的代码才会执行。你在某个时候打电话给element.requestFullScreen()吗？ developer.mozilla.org/en-US/docs/Web/API/Element/… HTML 上有一个按钮可以切换文档的全屏状态吗？

标签： javascript

【解决方案1】：

您需要通过在您的文档上调用.documentElement.requestFullscreen() 来触发全屏模式，我添加了一个按钮以在单击按钮时触发此功能，这里的 sn-p 可能不起作用，因为 stackoverflow sn-ps 是沙盒的，并且访问受限。

这里有一个工作的fiddle

更新答案：

我更改了代码以使按钮触发全屏并在选项卡处于全屏模式后将其切换回来，您还会注意到我删除了document.write()（似乎它会导致触发全屏退出事件）和将其替换为 <p> 标记以在选项卡中是否全屏时充当文本的日志记录占位符，我添加了对 document.fullscreenElement 的检查以切换我们执行的 <p> 和 <button> 标记文本displayButton() 在事件监听器中。

document.getElementById("full-screen").addEventListener("click", function () {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
});

document.addEventListener("fullscreenchange", function (event) {
  displayButton();
});

function displayButton() {
  if (document.fullscreenElement) {
    document.querySelector(".log").innerHTML =
      "you are in full screen! click the button to toggle back!";
    document.getElementById("full-screen").textContent = "exit full screen";
  } else {
    document.getElementById("full-screen").textContent = "full screen";
    document.querySelector(".log").innerHTML =
      "Not in full screen! press <strong>`full screen</strong> button to make the browser full screen.";
  }
}

document.querySelector(".log").innerHTML =
  "Not in full screen! press <strong>`full screen</strong> button to make the browser full screen.";

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link href="https://fonts.googleapis.com/css?family=Heebo:400,500&display=swap" rel="stylesheet" />
        <style></style>
    </head>
    <body>
      <div class="log"></div>
      <button id="full-screen">
      full screen
      </button>
    </body>
</html>

【讨论】：

谢谢，我差点搞定了！对于 Javascript 代码的第 2 和第 3 段，我想到的目的是在窗口全屏时使用它来删除按钮（因此仅在尚未全屏时显示按钮）。我应该如何更改这部分代码来实现这一点？
很高兴为您提供帮助，好的，让我检查一下。
@Marty，我更新了我的答案并做了一些改变，我也改变了小提琴。
谢谢，我想我们快到了！仅当从全屏切换回非全屏时，日志 div 仍会显示：“您处于全屏状态！单击按钮切换回！”
谢谢，它有效！一旦允许，我将添加赏金

【解决方案2】：

没有检测浏览器兼容性的完全可靠的方法，但您可以通过检查窗口高度和屏幕高度来检测，例如，在单击全屏按钮后，该功能是否有效：

if( window.innerHeight == screen.height) {
    // browser is fullscreen
}

取自这个有用的堆栈问题： Detect fullscreen mode

如果您确实想检查浏览器兼容性，您必须找出哪些浏览器支持全屏并创建一个自定义函数，该函数首先检测他们正在使用的浏览器，然后将那个浏览器与支持全屏的浏览器进行匹配.即

if (browser === 'Safari') {
    document.write("Open Fullscreen here")
}

关于如何检测浏览器的有用文章：https://code-boxx.com/detect-browser-with-javascript/

浏览器支持全屏：https://caniuse.com/#search=fullscreen

【讨论】：

【解决方案3】：

这是我为你写的，我认为这可能符合你的需要：

<html>
  <body>
    <p id="fs"></p>
    <script>  
      var el = document.getElementById("fs");

      window.addEventListener("resize", function (event) {
         checkFull();
      });

      if(document.fullscreenEnabled){
        checkFull();
      }else{
        el.innerText = "Fullscreen not supported.";
      }

      function checkFull(){
        if(screen.width === window.innerWidth){
            el.innerText = "User is fullscreen!";
          }else{
            el.innerText = "Waiting for user to enter fullscreen...";
          }
      }
    </script>
  </body>
</html>

这将检测窗口是全屏还是全屏，因为浏览器还没有提供可靠的检查方法。

【讨论】：