Question

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

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

Answer 1

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

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

编辑：如果用户有下载管理器，翻译栏或元素inspercter打开高度与sreen不同，请小心使用chrome。

Answer 2

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

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

Answer 3

我已经在不同的浏览器（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 4

当浏览器全屏显示并返回时（通过F11或HTML5全屏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

经过多次搜索和挫折，这是我找到的最佳方法：

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 6

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

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

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

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

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

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

6 个答案: