onfullscreenchange DOM event

Question

as the title reads, I'd like to know what is the most reliable way to trigger an event when the Browser(s) enters/leaves in/out the fullscreen mode.

note : I'm not asking how to fullscreen the current page, I just want to know whether or not there is a way to queue some tasks if the user, for example, press F11 or any other related fullscreen-entering keys.

Answer 1

I was working with this event when I stumble with this question, I want to share what I learn about it even though it won't solve this question. The onfullscreenchange event is now supported with prefixes by modern desktop browsers and Chrome for Android, but there are some things to have in mind:

• This event won't trigger when the window goes fullscreen, I know it sounds weird, but it seems to be intended only for the document and its elements. So if an element of a document goes fullscreen the event will trigger, but when a keyboard shortcut is used to make your browser fullscreen it won't.

• In Chrome and Safari a function can subscribe to this event either by defining the document method document.onwebkitfullscreenchange = myFunc; or by defining the element method myElem.onwebkitfullscreenchange = myFunc;, also you can use addEventListener myElem.addEventListener("webkitfullscreenchange", myFunc);. In IE and Firefox the event will work only if the method is defined in the document and using addEventListener won't trigger the event.

Here's a Codepen Demo of this event, more info in MDN Using fullscreen mode.

---

Update. From MDN web docs:

For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use Fscreen).

Answer 2

screen.width and screen.height tell you the user's screen resolution, so try this:

var fullscreen;
function onfullscreenchange(full) {
    ...
}

// You might want to use addEventListener and its equivalents instead
window.onresize = function () {
    if (window.outerWidth === screen.width && window.outerHeight === screen.height) {
        if (!fullscreen) {
            fullscreen = true;
            onfullscreenchange(true);
        }
    } else {
        if (fullscreen) {
            fullscreen = false;
            onfullscreenchange(false);
    }
};

I'm aware this isn't the cleanest or most robust way of doing all this, but hopefully it gives you an idea. Notably, IE<9 needs a different approach for determining the window size, so I'll leave you to look that up.

Answer 3

A slightly other approach using a media query and a fallback to the window.document.fullscreenElement.

This works on Chrome whether it's a click/touch event or the F11 key being pressed.

function fullscreenEvent(fullscreen) {
    ...
}

window.onresize = function () {
    if (window.matchMedia('(display-mode: fullscreen)').matches ||
    window.document.fullscreenElement) {
       fullscreenEvent(true);
    } else {
       fullscreenEvent(false);
    }
}

Answer 4

There is a plugin available for jQuery ( i know your not using jQuery ) ..... what it does is listen to the keys pressed on the window - so it listens for F11 being pressed etc ... Not the greatest solution but one that might work

Short of that I think you are stumped ...

A thought ...

I just stumbled across this page -> http://www.javascriptkit.com/howto/newtech3.shtml

JavaScript can detect the size of the screen using screen.width / screen.height ... perhaps use the resize event to see if the browser matches the screen size ie fullscreen ?

@Nathans answer is exactly what i was talking about ...