Как определить, что пользователь включил полноэкранный режим в браузере

Question

Возникает ли какое-либо событие JavaScript, когда пользователь включает полноэкранный режим в Chrome или FireFox?

У меня есть приложение WebGL с определенными размерами ширины и высоты холста, и я хотел бы изменить его, помимо прочего, когда пользователь активирует полноэкранный режим. Если такого события нет, должен ли я начать искать способы заполнить окно браузера холстом, хотя это усложняет процесс отладки?

Answer 1

Вы можете сравнить ширину экрана с шириной или высотой браузера.

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

РЕДАКТИРОВАТЬ: Будьте осторожны в Chrome, если у пользователя есть менеджер загрузок, переводчик или элемент inspercter, высота которого отличается от экрана.

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

В 2019 году, через восемь лет после того, как вопрос был задан, MDN рекомендует с использованием fscreen , поскольку браузеры по-прежнему не поддерживают полноэкранный API согласованным образом.

Чтобы определить, перешел ли браузер в полноэкранный режим, прослушайте событие fullscreenshange:

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

Чтобы получить элемент, который в данный момент находится в полноэкранном режиме, используйте fscreen.fullscreenElement.

A демонстрация fscreen показывает, что полноэкранное состояние может быть обнаружено.

Answer 6

После долгих поисков и разочарований это лучший метод, который я нашел:

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