fullscreenchange event not firing in Chrome

Question

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.

Answer 1

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.

Answer 2

As an alterative, onresize event or ResizeObserver should also work.

let field = document.getElementById('textarea');

field.addEventListener('resize', (event) =>
{
    console.log(1, event);
});

let resizeObserver = new ResizeObserver(entries =>
{
    for (let entry of entries)
    {
        console.log(2, entry);
    }
});

resizeObserver.observe(field);

The following one is usually not recommended - overwrites the global event, hence addEventListener.

window.onresize = function(event)
{
    console.log(1, event);
};

Related: JavaScript window resize event...