HTML5 Fullscreen Event Listener

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?

Answers:

Answer

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

This is what I have gone with at the moment:

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

This isn't necessarily the best solution to the question, but it does work!

I'd almost ALWAYS use jQuery and bind the events all together as shown by Patrick Hofman.

E.g.

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

But for the sake of keeping it library-free I've not included it in my answer, as the question was double ended and trying to figure out how to detect fullscreen in native JavaScript.

Thanks for the help, and feel free to add additional solutions / suggestions for others who are trying to achieve the same.

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.