logo标签列表

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

javascriptfullscreenasp.net-web-api
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来检查页面是否全屏。

但是，这种检查只有在页面已经全屏时才有效，而不是当用户点击“允许”时进入全屏模式。所以，有没有什么方法可以解决这个问题？

这个答案对您有帮助吗：https://dev59.com/XlbTa4cB1Zd3GeqP7hco？ - The Dark Knight
在这里：http://davidwalsh.name/fullscreen，David Walsh提到“fullscreenchange”事件可以让我们知道何时进入或退出全屏模式。您可以使用以下代码来检测：var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled; - The Dark Knight
@TheDarkKnight，在问题本身中我已经提到了我正在使用document.mozFullScreenElement，它只在页面已经处于全屏模式时才起作用！ - user2587132
3个回答
1

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

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

我在http://xme.im/display-fullscreen-website-using-javascript上找到了一篇非常好的文章，其中对不同浏览器的支持情况进行了很好的概述。还提出了一些可以使用的事件。

如果这行不通，我想一个（恶性的）hack将是引入一个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>

感谢提供的链接，很抱歉我没有找到有关该问题的有用信息，除了一些未来的建议。是的，我也考虑过区间，但有些犹豫，希望其他人能提出更好的想法。给区间点赞！ - user2587132
不行，这段代码对我没用。我调整了前缀、伪类和函数以匹配浏览器，但还是不行 :( - user2587132
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();

 }
当用户拒绝全屏请求时会发生什么？那么更改已经发生了，这是不应该的！ - user2587132
也许你可以在页面退出全屏模式后撤销更改？因为如果你发出请求，在允许/拒绝之前，你已经处于全屏模式中了（就像你之前说的那样）。还有一种叫做“mozfullscreenerror”的东西，但我不知道当用户点击拒绝按钮时是否会触发此事件。 - Vincent Hogendoorn
全屏显示不能在允许/拒绝之前发生！感谢您建议使用“_mozfullscreenerror_”，但这是一个事件，当请求全屏的元素不支持全屏时会发生。 - user2587132
我在网上看到了一些演示，例如在这里：http://html5-demos.appspot.com/static/fullscreen.html，如果我点击切换全屏，我在允许（或关闭）全屏之前就已经进入全屏模式了... - Vincent Hogendoorn
我明白你的意思，它看起来是全屏，但实际上并没有被识别为全屏，因为当我尝试检查/测试全屏时，它没有通过！而且还有一个问题，当用户点击"拒绝"时，我该怎么办呢？顺便说一句：我确实尝试了你在答案中提到的代码，就像我说的，即使用户点击"拒绝"，改变仍然存在 :( 而且无论是在"允许"还是"拒绝"期间，检查全屏始终返回false。 - user2587132
是的，在您第一次评论后，我已经意识到它总是在执行，即使用户点击拒绝。我现在唯一的想法是在退出全屏模式时撤销更改。但我认为你也不想那样做。希望有人能帮助您进一步解决这个问题。 - Vincent Hogendoorn
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接