javascriptjquerygoogle-chromefullscreen

fullscreenchange event not firing in Chrome

I'm trying to monitor when the browser enters fullscreen mode.

This blog is referenced everywhere I search as the guide on the fullscreen API.

http://robertnyman.com/2012/03/08/using-the-fullscreen-api-in-web-browsers/

This SO answer also claims this works.

Fullscreen API: Which events are fired?

Here is my code with jQuery, but it's not firing the event.

$(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange",function(){
        console.log("bang!");
});

Seems simple enough, but it doesn't fire in Chrome. Any idea what I'm doing wrong?

UPDATE:

Discovered something new. The events are working only if JavaScript calls the requestFullScreen API, but not if the user presses F11.

Solution

  • fullscreenchange events do work, but only if the fullscreen mode is triggered by requestFullscreen.

    There appears to be a security restriction that prevents JavaScript from monitoring if a user manually enables fullscreen mode via a hotkey.

    Alternatively, you can monitor the resize events to see if the window matches the desktop size, but this seems like a hack to me (i.e. would this work on dual-monitors?)

    I decided to abandon monitoring of fullscreen mode, and just use the API to toggle the state.