我如何检测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嵌入到我的站点中。iFrame来自Box.com文档查看器。iFrame有自己的全屏按钮。全屏幕按钮在iFrame中，因此我无法将单击事件监听器附加到该按钮。我向iFrame添加了allowfullscreen属性，以允许它全屏显示。

I want to do something like this:

我想做这样的事情:

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

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

但是我需要听什么事件，来检测iFrame何时开始全屏?

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

下面是我正在嵌入的文档类型的jsfiddle。目的是检测文档何时全屏显示。

http://jsfiddle.net/Rnvcm

3 个解决方案

#1

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

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

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

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

#2

Using the events pointed out by putvande you can still bind your own enterFullScreen event:

使用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');
    }
});

You can use the simpler enterFullScreen event now using:

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

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

#3

The other answers did not work for me exactly as described in a Cordova 4.0.0 (Android 4.1.1) app running on a Galaxy S4 (5.0.1 Lollipop) but the following does:

其他的答案对我来说并不像Cordova 4.0.0 (Android 4.1.1)应用程序中描述的那样适用于Galaxy S4 (5.0.1 Lollipop)，但以下是正确的:

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
    }
  }
});

I am using the Cordova ScreenOrientation plugin to handle orientation locking based on fullscreen detection.

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

#1