如何检测“进入”全屏模式？ - 全屏 Web API答案

【问题标题】：How to detect 'going into' fullscreen mode? - Fullscreen Web API如何检测“进入”全屏模式？ - 全屏 Web API
【发布时间】：2013-09-30 18:21:05
【问题描述】：

我正在使用Fullscreen Web API。

  function goFullscreen(){

     var elem =  document.body;
     if (elem.requestFullscreen)  elem.requestFullscreen();
     else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen();
     else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen(); 

     var fullscreenElement = document.mozFullScreenElement;   
     if(fullscreenElement){
     /** some changes to the page **/
     }     
   }

我使用document.mozFullScreenElement 来检查页面是否全屏。

但是，该检查仅在页面已经全屏时才起作用，而不是在它进入全屏时（即当用户单击“允许”时）。那么，这有什么技巧吗？

【问题讨论】：

这个答案对你有帮助吗：stackoverflow.com/questions/5617963/…?
在这里：davidwalsh.name/fullscreen，大卫沃尔什提到The fullscreenchange event lets us know when we go to/from fullscreen mode。您可以使用var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled; 检测到
@TheDarkKnight，在问题本身中，我提到我正在使用document.mozFullScreenElement，它仅在页面已经处于全屏模式时才有效！

标签： javascript fullscreen asp.net-web-api

【解决方案1】：

我在http://xme.im/display-fullscreen-website-using-javascript 上找到了一篇非常好的帖子，它很好地概述了不同浏览器的支持。还继续建议一些可以使用的事件。

如果这不起作用，我想一个（讨厌的）黑客会引入一个 setInterval 轮询来检查全屏，如果 true 触发自定义事件并清除间隔？

编辑...

我对文章中的上述代码进行了尝试，并同意它不能解决问题。在某些情况下，基于大小的检测是否处于全屏模式也会出现不可预测的行为。

总体而言，浏览器行为似乎在它进入全屏时被视为“全屏”（在 Chrome 的情况下，这是在用户单击允许之前）。以下代码使我无需延迟/间隔即可检测到这一点，但由于用户仍然可以随时退出全屏模式（通过拒绝或浏览器控件），您仍然必须拆除您在进入时所做的任何页面更改全屏。我认为由于没有事件，我们必须将拒绝视为正常退出。下面的代码仅适用于 webkit，但可以很容易地使用 alt 前缀/伪类进行调整。

<html>
<head>
    <style>
        html, body { height : 100%; width : 100%; }
    </style>        
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        document.addEventListener("webkitfullscreenchange", function () {
            var isFullScreen = $("body:-webkit-full-screen").length;
            document.getElementById("status").innerHTML = (isFullScreen)? "I am full screen" : "I am NOT full screen";          
        }, false);

    </script>
</head>
<body>
    Hello
    <div id="status"></div>
    <button onclick="document.body.webkitRequestFullScreen()">&nbsp;Request FullScreen&nbsp;</button>       
</body>

【讨论】：

感谢帖子的链接，恐怕我找不到关于这个问题的任何有用的信息，除了一些未来的建议&是的，我也想过间隔，但有点犹豫，想别人可能会在这里想出更好的东西:)。 +1 间隔！
不，代码对我不起作用我调整了前缀、伪类和函数以匹配浏览器，但它没有:(

【解决方案2】：

另一种选择是像您一样进行这些检查，但改为全屏，调用正在页面上进行一些更改的函数，然后进入全屏：

例如：

 function goFullscreen(){
   var elem =  document.body;
   if (elem.requestFullscreen) 
    changeContent("requestFullscreen")
   else if (elem.mozRequestFullScreen) 
    changeContent("mozRequestFullScreen")
   else if (elem.webkitRequestFullscreen) 
    changeContent("webkitRequestFullscreen")
 }

 function changeContent(fullScreenType) {
   var elem =  document.body;
   /** some changes to the page, **/

    /** after those changes, do the check and go fullscreen **/
   if (fullScreenType == "requestFullscreen")
    elem.requestFullscreen();
   else if (fullScreenType == "mozRequestFullscreen")
    elem.mozRequestFullscreen();
   else if (fullScreenType == "webkitRequestFullscreen")
    elem.webkitRequestFullscreen();

 }

【讨论】：

当用户拒绝全屏请求时会发生什么？那么这些变化就已经发生了，这是他们不应该发生的！
如果页面不再处于全屏模式，也许您可以撤消更改？因为如果您提出请求，则在允许/拒绝可能之前您已经处于全屏模式（就像您已经说过的那样）。还有“mozfullscreenerror”之类的东西，但我不知道当用户点击拒绝按钮时是否会发生此事件
在允许/拒绝之前不能出现全屏！感谢您提出 mozfullscreenerror 的建议，但这是在请求全屏的元素不支持全屏时发生的事件。
我在网上看到了一些演示，例如：html5-demos.appspot.com/static/fullscreen.html 如果我点击切换全屏，我已经处于全屏模式，然后才能允许（或关闭）全屏。 .
我明白你的意思，它确实出现全屏，但老实说，当我尝试检查/测试全屏时它没有注册为全屏，它没有不通过！还有一个问题是当用户点击deny时我会做什么。 PS：我确实尝试了您在答案中建议的代码，就像我说即使用户单击 deny :( 并且全屏检查总是返回 false （在允许 && 拒绝)

【解决方案3】：

使用这个 if 语句跨浏览器来检测我们当前是否处于全屏模式：

            if (
                !document.isFullScreen &&
                !document.fullscreenElement &&
                !document.webkitFullscreenElement &&
                !document.mozFullScreenElement &&
                !document.msFullscreenElement
            )
            { // make full screen }

【讨论】：