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

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

Answer 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插件来处理基于全屏检测的方向锁定。

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

3 个答案: