3

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

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

4

3 回答 3

1

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

            if (
                !document.isFullScreen &&
                !document.fullscreenElement &&
                !document.webkitFullscreenElement &&
                !document.mozFullScreenElement &&
                !document.msFullscreenElement
            )
            { // make full screen }
于 2017-10-16T00:04:11.557 回答
0

我在这个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>

于 2013-09-25T09:03:13.603 回答
0

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

例如：

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

 }
于 2013-09-25T09:10:22.043 回答