在 Adob​​e Captivate 中编辑构件的 iframe 属性

Question

我正在为 Adob​​e Captivate 编写一个小部件，它必须在 HTML5 中工作。这个小部件包含一个按钮来切换全屏模式。基本上，插件看起来像这样：

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

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

但是小部件是在iframe中插入的，而这个iframe没有allowfullscreen属性，因此阻止了按钮切换全屏模式。

我正在寻找一种方法，通过从 iframe 内部执行一些 Javascript 来将 allowfullscreen 属性添加到 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');

但是，这在显示来自本地源的已发布项目时不起作用（Cross-origin 保护）。从网络服务器（甚至本地主机）显示时它工作正常。