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