HTML5全屏事件监听器 [英] HTML5 Fullscreen Event Listener

问题描述

  document.addEventListener（'webkitfullscreenchange mozfullscreenchange （document.fullScreenElement&& document.fullScreenElement！== null）|| 
（！document.mozFullScreenElement&&&！document.webkitFullScreenElement）函数（e）{
 if ）{
 console.log（'fullscreen'）; 
} else {
 console.log（'not fullscreen'）; 
} 
}，false）; 
  

但无论我是进入还是退出全屏，事件都不会被解雇。

有什么想法？

解决方案

/ p>

 函数check（）{
 
 if（！window.screenTop&&！window.screenY ）{
 console.log（'not fullscreen'）; 
} else {
 console.log（'fullscreen'）; 
 
 
 $ b $ document.addEventListener（'webkitfullscreenchange'，函数（e）{
 
 check（）; 
 
}，false）; 
 
 document.addEventListener（'mozfullscreenchange'，function（e）{
 
 check（）; 
 
}，false）; 
 
 document.addEventListener（'fullscreenchange'，function（e）{
 
 check（）; 
 
}，false）; 
  

这不一定是问题的最佳解决方案，但确实有效！

我几乎总是使用jQuery并将事件绑定在一起，如Patrick Hofman所示。

< （e）
{$（document）.on（'webkitfullscreenchange mozfullscreenchange fullscreenchange'，function（e）

  b $ b if（！window.screenTop&！window.screenY）{
 console.log（'not fullscreen'）; 
} else {
 console.log（'fullscreen '）; 
} 
}）; 
  

但为了保持图书馆免费，我没有把它包含在我的答案中，因为问题是双重结束，并试图弄清楚如何在原生JavaScript中检测全屏。

感谢您的帮助，并随时为其他人添加其他解决方案/建议正试图达到同样的效果。

I'm trying to detect if the current document is fullscreen or not using:

document.addEventListener('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    if ((document.fullScreenElement && document.fullScreenElement !== null) || 
    (!document.mozFullScreenElement && !document.webkitFullScreenElement)) {
        console.log('fullscreen');
    } else {
        console.log('not fullscreen');
    }
}, false);

But the event NEVER gets fired no matter I do to enter or exit fullscreen.

Any ideas?

解决方案

This is what I have gone with at the moment:

function check() {

    if (!window.screenTop && !window.screenY) {
       console.log('not fullscreen');
    } else {
         console.log('fullscreen');
    }
}

document.addEventListener('webkitfullscreenchange', function(e) {

    check();

}, false);

document.addEventListener('mozfullscreenchange', function(e) {

    check();

}, false);

document.addEventListener('fullscreenchange', function(e) {

    check();

}, false);

This isn't necessarily the best solution to the question, but it does work!

I'd almost ALWAYS use jQuery and bind the events all together as shown by Patrick Hofman.

E.g.

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e)    
{
    if (!window.screenTop && !window.screenY) {
           console.log('not fullscreen');
    } else {
           console.log('fullscreen');
    }
});

But for the sake of keeping it library-free I've not included it in my answer, as the question was double ended and trying to figure out how to detect fullscreen in native JavaScript.

Thanks for the help, and feel free to add additional solutions / suggestions for others who are trying to achieve the same.

这篇关于HTML5全屏事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！