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

How to detect if user has enabled full screen in browser

提问by Zharktas

Is there some JavaScript event fired when user enables full screen in Chrome or FireFox?

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

I have WebGL application with canvas width and height set to a certain size and I would like to resize that among other things when user enables full screen. If there isn't such event, should I start researching ways to fill the browser window with canvas all though it complicates things while debugging?

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

回答by Yoann

You can compare the sreen width to the browser width, or height.

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

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

EDIT : Be carefull in chrome if user have download manager, translate bar or element inspercter open the height is different to the sreen.

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

回答by PBN

You can use document.mozFullScreen and document.webkitIsFullScreen as below:

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

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

回答by babyromeo

I have done the test on different browsers (IE9, Chrome, FireFox, Opera & Safari) this function works.

我已经在不同的浏览器（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');
}

回答by Matěj Pokorny

I create new event, that fire, when browser goes fullscreen and back (via F11 or HTML5 Fullscreen API).

我创建了一个新事件，当浏览器进入全屏并返回时（通过 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);  
    }
})();

Using with JavaScript

与 JavaScript 一起使用

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

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

or jQuery

或 jQuery

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

回答by Matthew Walker

In 2019, eight years after the question was asked, MDN recommendsusing fscreenbecause browsers still don't support the fullscreen API in a consistent manner.

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

To detect if the browser has gone fullscreen, listen for the event fullscreenshange:

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

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

To obtain the element that is currently in fullscreen, use fscreen.fullscreenElement.

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

A demo of fscreenshows that the fullscreen state can be detected.

fscreen的演示显示可以检测到全屏状态。

回答by apaul

After much searching and frustration this is the best method I've found:

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

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

Or if you prefer not to use the ternary operator:

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

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