0

我正在为 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属性，因此阻止按钮切换全屏模式。

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

我尝试使用 Javascript 访问器parent.document，但出现错误：

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

1 回答 1

0

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

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

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

于 2017-02-10T12:18:44.407 回答