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