HTML5全屏事件监听器

Question

我正在尝试使用以下方法检测当前文档是否为全屏：

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

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

有任何想法吗？

Answer 1

这就是我现在所做的事情：

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

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

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

例如

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

但是为了保持它免于库，我没有将它包含在我的答案中，因为问题是双重结束并试图弄清楚如何在本机JavaScript中检测全屏。

感谢您的帮助，并随时为试图实现相同目标的其他人添加其他解决方案/建议。

Answer 2

你确定你不是故意使用jQuery bind吗？

据我所知， document.addEventListener不支持多个事件。

如果您想使用jQuery，请使用此示例（基于此问题在SO上 ）：

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e)
{
    //do something;
});

Answer 3

一个方便的免库解决方案：

["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "msfullscreenchange"].forEach(
    eventType => document.addEventListener(eventType, yourCheckFunction, false)
);

或者：

["", "webkit", "moz", "ms"].forEach(
    prefix => document.addEventListener(prefix+"fullscreenchange", yourCheckFunction, false)
);