如何检测用户是否在浏览器中启用全屏

Question

当用户在 Chrome 或 FireFox 中启用全屏时，是否会触发一些 JavaScript 事件？

我的 WebGL 应用程序的画布宽度和高度设置为特定大小，我想在用户启用全屏时调整其大小。如果没有这样的事件，我是否应该开始研究用画布填充浏览器窗口的方法，尽管它在调试时会使事情变得复杂？

Answer 1

在 2019 年，也就是问题提出八年后，MDN recommends 使用 fscreen，因为浏览器仍然不以一致的方式支持全屏 API。

要检测浏览器是否已全屏，请监听事件fullscreenshange：

fscreen.addEventListener('fullscreenchange', handler, options);

要获取当前全屏的元素，请使用fscreen.fullscreenElement。

demo of fscreen表示可以检测到全屏状态。

Answer 2

经过多次搜索和挫折，这是我发现的最好方法：

function isFullScreen() {
    // do stuff for full screen
}

function notFullScreen() {
    // do stuff for non-full screen
}
document.addEventListener("fullscreenchange", function () {
    (document.fullscreen) ? isFullScreen() : notFullScreen();
}, false);

document.addEventListener("mozfullscreenchange", function () {
    (document.mozFullScreen) ? isFullScreen() : notFullScreen();
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    (document.webkitIsFullScreen) ? isFullScreen() : notFullScreen();
}, false);

或者如果您不想使用三元运算符：

function isFullScreen() {
    // do stuff for full screen
}

function notFullScreen() {
    // do stuff for non-full screen
}
document.addEventListener("fullscreenchange", function () {
    if (document.fullscreen) {
        isFullScreen();
    } else {
        notFullScreen();
    }
}, false);

document.addEventListener("mozfullscreenchange", function () {
    if (document.mozFullScreen) {
        isFullScreen();
    } else {
        notFullScreen();
    }
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    if (document.webkitIsFullScreen) {
        isFullScreen();
    } else {
        notFullScreen();
    }
}, false);

Answer 3

您可以将屏幕宽度与浏览器宽度或高度进行比较。

if (screen.width == window.innerWidth && screen.height == window.innerHeight) {
    //full web browser
}

编辑：如果用户有下载管理器、翻译栏或元素检查器打开高度与屏幕不同，请在 chrome 中小心。

Answer 4

我创建一个新事件，当浏览器进入全屏并返回（通过 F11 或 HTML5 Fullscreen API）时触发。

(function(){
    var ok = true;
    window.addEventListener('resize', function()
    {
        setTimeout(function () 
        {
            if (ok)
            {
                ok = false;
                setTimeout(function () { ok = true; }, 170);
                sendEvent(window.outerWidth === screen.width && window.outerHeight === screen.height);
            }
        }, 30);
    }, false);

    function sendEvent(fullscreen)
    {
        var event = new CustomEvent('fullscreenchange', { detail: fullscreen, bubbles: true, cancelable: true });

        if (document.fullscreenElement)
            document.fullscreenElement.dispatchEvent(event);
        else
           document.dispatchEvent(event);  
    }
})();

与 JavaScript 一起使用

document.addEventListener('fullscreenchange', fullscreenChanged, false);

function fullscreenChanged(event)
{
    console.log('Fullscreen: ' + event.detail);
}

或 jQuery

$(document).on('fullscreenchange', function()
{
    console.log('Fullscreen: ' + event.detail);
});

Answer 5

我已经在不同的浏览器（IE9、Chrome、FireFox、Opera & Safari）上做了测试，这个功能可以工作。

function chkfullscreen() {
    if (window.navigator.standalone || (document.fullScreenElement && document.fullScreenElement != =null) || (document.mozFullScreen || document.webkitIsFullScreen) || (!window.screenTop && !window.screenY))
        // full screen
        alert('full screen');
}

Answer 6

您可以使用 document.mozFullScreen 和 document.webkitIsFullScreen 如下：

if ((!document.mozFullScreen && !document.webkitIsFullScreen)) {
   //FullScreen is disabled
} else {
   //FullScreen is enabled
}