Полноэкранный прослушиватель событий HTML5

Я пытаюсь определить, является ли текущий документ полноэкранным или не используется:

document.addEventListener('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    if ((document.fullScreenElement && document.fullScreenElement !== null) || 
    (!document.mozFullScreenElement && !document.webkitFullScreenElement)) {
        console.log('fullscreen');
    } else {
        console.log('not fullscreen');
    }
}, false);

Но событие НИКОГДА не запускается независимо от того, что я делаю, чтобы войти или выйти из полноэкранного режима.

Любые идеи?

Ответ 1

Вы уверены, что не хотели использовать jQuery bind?

document.addEventListener не поддерживает несколько событий, насколько мне известно.

Используйте этот пример (на основе этот вопрос на SO), если вы хотите использовать jQuery:

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e)
{
    //do something;
});

Ответ 2

Это то, к чему я сейчас отношусь:

function check() {

    if (!window.screenTop && !window.screenY) {
       console.log('not fullscreen');
    } else {
         console.log('fullscreen');
    }
}

document.addEventListener('webkitfullscreenchange', function(e) {

    check();

}, false);

document.addEventListener('mozfullscreenchange', function(e) {

    check();

}, false);

document.addEventListener('fullscreenchange', function(e) {

    check();

}, false);

Это не обязательно лучшее решение вопроса, , но оно работает!

Я бы почти ВСЕГДА использовал jQuery и связал события вместе, как показал Патрик Хофман.

например.

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e)    
{
    if (!window.screenTop && !window.screenY) {
           console.log('not fullscreen');
    } else {
           console.log('fullscreen');
    }
});

Но для того, чтобы сохранить его в библиотеке, я не включил его в свой ответ, так как вопрос был двойным и попытался выяснить, как обнаружить полноэкранный режим в родном JavaScript.

Спасибо за помощь и не стесняйтесь добавлять дополнительные решения/предложения для других, которые пытаются достичь того же.

Ответ 3

Удобное без библиотечного решения:

["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "msfullscreenchange"].forEach(
    eventType => document.addEventListener(eventType, yourCheckFunction, false)
);

или, альтернативно:

["", "webkit", "moz", "ms"].forEach(
    prefix => document.addEventListener(prefix+"fullscreenchange", yourCheckFunction, false)
);