如何检测 iFrame 何时全屏显示？答案

【问题标题】：How can I detect when an iFrame goes fullscreen?如何检测 iFrame 何时全屏显示？
【发布时间】：2014-06-24 14:21:58
【问题描述】：

我有一个使用 iFrame 嵌入到我的站点中的文档。 iFrame 来自 Box.com 文档查看器。 iFrame 有自己的内置全屏按钮。全屏按钮位于 iFrame 内，因此我无法将单击事件侦听器附加到按钮。我将属性 allowfullscreen 添加到 iFrame 以允许它全屏显示。

我想做这样的事情：

$('iframe').on 'EnterFullScreen', () ->
  # Run function

但是我必须听什么事件才能检测 iFrame 何时进入全屏状态？

这是我嵌入的文档类型的 jsfiddle。目标是检测文档何时全屏显示。

http://jsfiddle.net/Rnvcm

【问题讨论】：

你不能只将事件附加到全屏按钮吗？ $("#goFullScreen").click(function(){......});
全屏按钮在 iframe 内！我无法将事件侦听器附加到我尝试过的 iFrame 中的按钮。
你能加个小提琴吗？
是的，就是这样。目标是检测 iframe 何时全屏显示。 jsfiddle.net/Rnvcm
除了看起来它实际上不允许文档在 jsfiddle 中全屏显示

标签： javascript jquery html events iframe

【解决方案1】：

您可以在父页面（具有iframe 的页面）中监听全屏更改：

function changeHandler(e) {
   // Mode has changed.
}

document.addEventListener("fullscreenchange", changeHandler, false);
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);

【讨论】：

非常感谢，这正是我想要的！

【解决方案2】：

使用 putvande 指出的事件，您仍然可以绑定自己的 enterFullScreen 事件：

$(document).on('fullscreenchange mozfullscreenchange webkitfullscreenchange msfullscreenchange', function() {
    if (document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement)
    {
        $(document).trigger('enterFullScreen');
    }
    else
    {
        $(document).trigger('leaveFullScreen');
    }
});

您现在可以使用更简单的enterFullScreen 事件：

$(document).on('enterFullScreen', function(){
    // Do stuff
});

【讨论】：

这对putvande的回答非常有帮助，谢谢！

【解决方案3】：

其他答案对我来说并不完全符合在 Galaxy S4 (5.0.1 Lollipop) 上运行的 Cordova 4.0.0 (Android 4.1.1) 应用程序中的描述，但以下是：

document.addEventListener("webkitfullscreenchange", function () {
  if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) {
    if (window.screen && typeof window.screen.unlockOrientation === 'function') {
      window.screen.unlockOrientation(); // Unlock screen orientation
    }
  } else {
    if (window.screen && typeof window.screen.lockOrientation === 'function') {
      window.screen.lockOrientation('portrait-primary'); // Relock screen orientation
    }
  }
});

我正在使用 Cordova ScreenOrientation 插件来处理基于全屏检测的方向锁定。

【讨论】：