Question

我正在使用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检查页面是否全屏。

但是，该检查仅在页面全屏时才有效，而不是在全屏全屏时（即用户点击“允许”时）。那么，这有什么问题吗？

Answer 1

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

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

Answer 2

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

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

编辑...

我在文章中讨论了上述代码并同意它没有解决问题。此外，基于大小的检测是否在全屏模式下在某些情况下表现不可预测。

总体而言，浏览器行为似乎在全屏显示时被视为“全屏”（在Chrome的情况下，这是在用户点击“允许”之前）。以下代码允许我检测到这一点，没有必要的延迟/间隔，但由于用户仍然可以随时退出全屏模式（通过拒绝或浏览器控件），您仍然需要删除您在输入时所做的任何页面更改全屏。我认为既然没有事件，我们必须将Deny视为正常退出。下面的代码只是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>

Answer 3

另一种选择是像你一样进行这些检查，而是全屏显示，调用在页面上进行一些更改的功能，然后进入全屏：

例如：

 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();

 }

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

3 个答案: