javascript - 如何检测 iFrame 何时进入全屏？

Question

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

我想做这样的事情:

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

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

这是一个包含我要嵌入的文档类型的 jsfiddle。目标是检测文档何时进入全屏。

http://jsfiddle.net/Rnvcm

Answer 1

您可以在父页面(具有 iframe 的页面)中监听全屏更改:

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

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