How to listen on exit fullscreen event in firefox?

Question

I have below code to enter fullscreen and listen on exist fullscreen event. This code works fine for chrome, safari, edge. But the exitListener is not called in firefox when exiting fullscreen mode. Does anyone know how to implement exit event listener in firefox?

const el = $('.mydiv')[0];
        const rfs =
            el.requestFullscreen ||
            el.webkitRequestFullScreen ||
            el.mozRequestFullScreen ||
            el.msRequestFullscreen;
        ['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'msfullscreenchange'].forEach(
            eventName => $('.mydiv').bind(eventName, exitListener)
        );
        rfs.call(el, Element.ALLOW_KEYBOARD_INPUT);

const exitListener = () => {
        const state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        if (!state) {
           // fullscreen exit
        }
}

I have read the post https://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen but the solution there doesn't solve my problem.

Possible duplicate of [How to detect when a page exits fullscreen?](https://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen) — Luka Čelebić, Apr 08 '18 at 00:20
I have read that post before but it doesn't solve my problem. — Joey Yi Zhao, Apr 08 '18 at 02:53

score 0 · Accepted Answer · answered Apr 08 '18 at 06:51

The fullscreenchange will fire on the document in Firefox when exiting, so you need to attach it there.

const el = $('.mydiv')[0];
const rfs =
  el.requestFullscreen ||
  el.webkitRequestFullScreen ||
  el.mozRequestFullScreen ||
  el.msRequestFullscreen;
['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'msfullscreenchange'].forEach(
  eventName => $(document).on(eventName, exitListener)
);
rfs.call(el, Element.ALLOW_KEYBOARD_INPUT);

const exitListener = () => {
  const state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
  if (!state) {
    // fullscreen exit
  }
}

As a fiddle since StackSnippet®'s iframe doesn't have the allowfullscreen attribute.

How to listen on exit fullscreen event in firefox?

1 Answers1