如何检测iFrame何时全屏？ [英] How can I detect when an iFrame goes fullscreen?

问题描述

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

I have a document that is embedded in my site by using an iFrame. The iFrame is from Box.com document viewer. The iFrame has its own built in fullscreen button. The fullscreen button is within the iFrame so I cannot attach a click event listener to the button. I added the attribute allowfullscreen to the iFrame to allow it to go fullscreen.

我想做这样的事情：

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

但是我必须听什么事情来检测什么时候iFrame正在全屏吗？

But what event do I have to listen to, to detect when the iFrame is going fullscreen?

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

Here is a jsfiddle with the type of document I am embedding. The goal is to detect when the document goes fullscreen.

http：/ /jsfiddle.net/Rnvcm

推荐答案

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

You can listen for a fullscreen change in your parent page (the one having the iframe):

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

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

这篇关于如何检测iFrame何时全屏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！