HTML5 Fullscreen Event Listener

Question

I'm trying to detect if the current document is fullscreen or not using:

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

But the event NEVER gets fired no matter I do to enter or exit fullscreen.

Any ideas?

Answer 1

A convenient library-free solution:

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

or alternatively:

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

Answer 2

Are you sure you didn't mean to use the jQuery bind?

The document.addEventListener does not support multiple events as far as I know.

Use this example (based on this question on SO) if you like to use jQuery:

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