Question

我有以下代码进入全屏并听取现有的全屏事件。此代码适用于chrome，safari，edge。但退出全屏模式时，在Firefox中不调用exitListener。有谁知道如何在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
        }
}

我已阅读帖子https://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen，但解决方案并未解决我的问题。

Answer 1

退出时，fullscreenchange将触发Firefox中的文档，因此您需要将其附加到那里。

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 ，因为StackSnippet®的iframe没有 allowfullscreen 属性。

如何在firefox中退出全屏事件？

1 个答案: