Блог

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

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

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

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

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

Вы можете использовать document.mozFullScreen и document.webkitIsFullScreen как показано ниже:

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

Я провел тест в разных браузерах (IE9, Chrome, FireFox, Opera amp; Safari), эта функция работает.

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

Я создаю новое событие, которое срабатывает, когда браузер переходит на полноэкранный режим и обратно (через 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 amp;amp; 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);
});
  

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

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

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

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

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

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

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