Why does the`fullscreenchange` not work when pressing F11? How do I detect if you changed to fullscreen in the browser?

Asked

Viewed 29 times

1

I was trying to find some way to detect if the page entered "full screen" mode, for example tight F11.

I saw there was an event fullscreenchange Event, but it appears not to work when pressing F11. It only works if the JS itself triggers the fullscreen (using the Fullscreen API.

The code I used that doesn’t work was:

document.addEventListener('fullscreenchange', function(e) {
    console.log("fullscreen", e);
});

When F11 grip was expected to show the message, but it does not seem. It only seems to call via document.documentElement.requestFullscreen();.

EDIT: THE matchMedia ALSO DOESN’T WORK:

window.matchMedia('(display-mode: fullscreen)').addListener(function(e) {
    console.log(e);
})

window.matchMedia('(display-mode: fullscreen)').addEventListener("change", function(e) {
    console.log(e);
})

Is there any other event or way of knowing when the window enters (or exits) full-screen mode?

javascript

  • You can use the event keydown to detect the key F11 (keycode 122) you just won’t know if it came full screen or came out.

1 answer

1


I don’t know why you can’t use the fullscreenchange, but it has how to make a gambiarra using resize.

The resize works by going to the fullscreen, even when you click F11. To find out if you are in fullscreen you can use the window.innerHeight combined with the screen.height. The screen.height is the total size, so it will only be equal if it is fullscreen.

The document.fullscreenElement does not work either, when clicking F11, so there is no way to trust it. But, maybe you can use it before appealing to the gambiarra.

window.addEventListener('resize', function(e){
    if (window.document.fullscreenElement !== null || window.innerHeight === screen.height) {
        console.log("é fullscreen");
        return
    }
     
    console.log("não é fullscreen");
})

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.