DOM onfullscreenchange event

Question

as the title reads, I would like to know what is the most reliable way to trigger an event when the browser enters / exits / from full screen mode.

note: I am not asking how full-screen viewing of the current page, I just want to know if there is a way to queue some tasks if the user, for example, presses F11 or any other full-screen keys associated with it.

Answer 1

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

 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 know that this is not the cleanest or most reliable way to do all this, but hopefully it gives you an idea. It is noteworthy that IE <9 needs a different approach to determine the size of the window, so I will leave you to review.

Answer 2

I worked with this event, when I stumble with this question, I want to share what I learn about it, although it will not solve this issue. The onfullscreenchange event is now supported by prefixes by modern desktop browsers and Chrome for Android , but there are some things to keep in mind:

• This event will not fire when the window is full-screen, I know it sounds strange, but it seems to be intended only for the document and its elements. Therefore, if a document element goes into full-screen mode, the event will fire, but if a keyboard shortcut is used to view your browser in full-screen mode, it will not.

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

Here is the Codepen Demo of this event, more information in MDN Using full screen mode .

---

Update . From MDN web docs:

Currently, not all browsers implement an unsigned version of the API (for agnostic access of the provider to the full-screen API, you can use Fscreen ).

Answer 3

There is a plugin available for jQuery (I know that you are not using jQuery) ..... what it does is listen for keys clicking on a window - so it listens for pressing F11, etc. Not the biggest solution, but may work

In short, I think you're at a dead end ...

Think...

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

JavaScript can determine the screen size using screen.width / screen.height ... maybe use the resize event to see if the browser matches the screen size, i.e. full screen?

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

Answer 4

There is a suggested full-screen Javascript API that allows you to connect to the onfullscreenchange event.

However, I am not very optimistic about browser support at this point in time.

Answer 5

how about using this jQuery plugin

Yes, I know that there can be a pure js-way, but it is very easy.

Answer 6

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

This works in Chrome, whether it's a touch / touch event or a F11 key press.

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