I need to know which (DOM) events are fired when a user enter the fullscreen mode via the new Fullscreen API. I tried for example this snippet but it doesn't fire:
jQuery('body').on('fullScreenChange', function() { alert("Fired!"); });
The Fullscreen API adds methods to present a specific Element (and its descendants) in fullscreen mode, and to exit fullscreen mode once it is no longer needed.
The fullscreenchange event is fired immediately after the browser switches into or out of fullscreen mode. The event is sent to the Element that is transitioning into or out of fullscreen mode, and this event then bubbles up to the Document .
I was using:
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', fn);
It fires for Safari, Chrome, and Firefox (haven't tested others). There seems to be a subtle difference in the resulting context between webkit and moz, element height and width are different. But the events fire, which is your question.
Oh. And watch out for using alert('fs')
with full screen testing. It often interferes with the screen change.
Your link shows the answer...
When full-screen mode is successfully engaged, the document which contains the full-screen element receives a
fullscreenchange
event. When full-screen mode is exited, the document again receives afullscreenchange
event. Note that thefullscreenchange
event doesn't provide any information itself as to whether the document is entering or exiting full-screen mode, but if the document has a non nullfullScreenElement
, you know you're in full-screen mode.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With