Question

我正在为Adobe Captivate编写一个小部件，它必须在HTML5中运行。此小组件包含一个用于切换全屏模式的按钮。基本上，插件看起来像这样：

＆＃13;

function toggleFullscreen(elem) {
  elem = elem || document.documentElement;
  if (!document.fullscreenElement && !document.mozFullScreenElement &&
    !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

document.getElementById("fullscreen").addEventListener("click", toggleFullscreen);

＆＃13;

<button id="fullscren">Toggle full screen</button>

＆＃13;

但是小部件已插入iframe，此iframe没有allowfullscreen属性，因此会阻止该按钮切换全屏模式。

我正在寻找一种方法，通过从allowfullscreen内部执行一些Javascript，将iframe属性添加到iframe，以便使用正确的配置发布项目自动添加此属性。

我尝试使用Javascript访问者parent.document，但收到错误：

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

Answer 1

在Javascript中使用parent属性就足够了。然后，您可以使用以下行添加allowfullscreen属性：

parent.document.getElementsByTagName('iframe')[0].setAttribute('allowFullScreen', 'true');

但是，从本地源（跨源保护）显示已发布项目时，这不起作用。从Web服务器（甚至是localhost）显示时，它可以正常工作。

从Adobe Captivate中的窗口小部件编辑iframe属性

1 个答案: