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?

@Huangism: I disagree. I think this is about a specific problem, not the fullscreen functionality in general. — Patrick Hofman, Feb 13 '14 at 21:05
NOT a duplicate as ALL of the answers talk about detecting rather than the actual EVENT listener (which is the question). — Cameron, Feb 13 '14 at 21:05
In that case it's a dupe of the docs / any docs regarding [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener)? — PeeHaa, Feb 13 '14 at 21:06
Can't you then bind resize and in the resize function apply the detect full screen mode? Unless going into fullscreen does not trigger resize, although it would make sense that it does trigger it since there is a size difference — Huangism, Feb 13 '14 at 21:08
http://stackoverflow.com/questions/9621499/fullscreen-api-which-events-are-fired — Huangism, Feb 13 '14 at 21:12
Note that despite the answers here, the event doesn't fire when hitting F11, as pointed out in [this answer](https://stackoverflow.com/a/21118401/345716) — Peter V. Mørch, Feb 13 '19 at 16:40

score 22 · Answer 1 · edited Sep 12 '17 at 08:29

22

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

edited Sep 12 '17 at 08:29

SimonT

2,219
1
18
32

answered Aug 14 '16 at 13:14

Christoph142

1,309
11
14

Simple and elegant. I like this. – Andrew May 02 '18 at 15:21

score 15 · Answer 2 · edited May 23 '17 at 11:54

15

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

edited May 23 '17 at 11:54

Community

1
1

answered Feb 13 '14 at 21:04

Patrick Hofman

153,850
22
249
325

Oh. How would I do it then? Just copy the addEventListener for each event? – Cameron Feb 13 '14 at 21:06
Yeah, thanks. I was avoiding jQuery deliberately in my question, but usually use it exclusively in my projects. I've opted to use multiple event listeners for the sake of the question (rather than a complex for loop) but in a production environment I'd use jQuery. – Cameron Feb 13 '14 at 23:31
You are wrong, you can add multiple events with `addEventListener`. – Aloso May 15 '16 at 13:11

Cameron · Answer 3 · 2014-02-13T23:34:59.927

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.

For me I always got logged 'fullscreen' as both vars were -1440, so i think a boolean outside this scope which changes value everytime the event is called is a better solution — Ben Taliadoros, Sep 16 '15 at 14:34

HTML5 Fullscreen Event Listener

3 Answers3

Linked