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

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

javascript

Javascript 根据是否支持全屏以及是否已处于全屏模式显示文本,javascript,Javascript,我对Javascript非常陌生。我试图根据浏览器是否支持全屏以及是否已经全屏显示来显示文本。在页面顶部，我添加了下面的代码。然而，这似乎不起作用。它没有显示任何内容。你知道怎么做吗 <script type="text/javascript"> document.addEventListener("fullscreenchange", function (event) { if (document.fullscreenElement) { doc

我对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>


文档。添加事件列表器（“全屏幕更改”，函数（事件）{
if（document.fullscreenElement）{
编写（“全屏已激活”）；
}否则{
显示按钮（）；
}
});
功能显示按钮（）{
如果（document.fullscreenEnabled）{
编写（“在此全屏打开”）；
}否则{
document.write（“不支持全屏显示”）；
}
};

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

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

摘自这个有用的堆栈问题：

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

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

有关如何检测浏览器的有用文章：

浏览器对全屏的支持：

我为您编写了这篇文章，我认为这可能适合您的需要：

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



var el=document.getElementById（“fs”）；
window.addEventListener（“调整大小”），函数（事件）{
checkFull（）；
});
如果（document.fullscreenEnabled）{
checkFull（）；
}否则{
el.innerText=“不支持全屏。”；
}
函数checkFull（）{
if（screen.width==window.innerWidth）{
el.innerText=“用户是全屏的！”；
}否则{
el.innerText=“等待用户进入全屏…”；
}
}

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

您需要通过调用文档来触发全屏模式，我添加了一个按钮来触发此按钮单击，这里的代码段可能不起作用，因为stackoverflow代码段是沙盒，访问受限。

这里有一个正在工作的

更新的答案：

我更改了代码，使按钮触发全屏，并在选项卡处于全屏模式时将其切换回原处，您还会注意到我删除了

document.write（）

（似乎它会触发全屏退出事件）并将其替换为

标记，以便在选项卡处于全屏或非全屏状态时充当文本的日志位置。我在

文档中添加了一个复选框。fullscreenElement

以切换

和

标记文本，我们在事件侦听器中执行

displayButton（）

document.getElementById（“全屏”）.addEventListener（“单击”），函数（）{
如果（！document.fullscreenElement）{
document.documentElement.requestFullscreen（）；
}否则{
if（document.exitFullscreen）{
document.exitFullscreen（）；
}
}
});
文档。添加事件列表器（“全屏幕更改”，函数（事件）{
显示按钮（）；
});
函数displayButton（）{
if（document.fullscreenElement）{
document.querySelector（“.log”）.innerHTML=
“您处于全屏状态！单击按钮可切换回！”；
document.getElementById（“全屏”）.textContent=“退出全屏”；
}否则{
document.getElementById（“全屏”）.textContent=“全屏”；
document.querySelector（“.log”）.innerHTML=
“不是全屏显示！按`全屏按钮可使浏览器全屏显示。”；
}
}
document.querySelector（“.log”）.innerHTML=
“不是全屏显示！按`全屏按钮可使浏览器全屏显示。”

全屏
只有在触发事件fullscreenchange
时，您的代码才会执行。您是否正在调用element.requestFullScreen（）
？你在HTML上有一个按钮可以切换文档的全屏状态吗？谢谢，我几乎成功了！我在Javascript代码第2和第3段中考虑的目的是，如果窗口处于全屏状态，则使用此选项删除按钮（因此，仅在尚未处于全屏状态时显示按钮）。我应该如何更改代码的这一部分来实现这一点？很高兴提供帮助，好的，让我检查一下。@Marty，我更新了我的答案并做了一些更改，我还更改了小提琴。谢谢，我想我们快到了！仅当从全屏切换回非全屏时，log div仍然显示：“您处于全屏状态！单击按钮切换回！”谢谢，它可以工作！我会再加上一次赏金