requestFullscreen 在消息事件处理程序中不再起作用

Question

用户单击一个按钮，在 click 事件处理程序中我们 postMessage 到 iframe。 Iframe 在 message 事件处理程序中处理它并调用 element.requestFullscreen()。在较旧的浏览器中它可以工作（例如在 Chrome 65 中）但在当前 (72) 中它会出现 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture..

错误

有没有办法在 postMessage 调用中传输 "gesture initiated" 标志？

请注意，iframe 具有 allow="fullscreen" 属性。

Answer 1

与 iframe 一样，这取决于它相对于父文档的托管位置。

如果你是运行那个框架中的同源文档，那么你可以简单地直接在你希望形成的元素上调用requestFullScreen主要文档：

const frameDoc = frame.contentDocument;
frameDoc.getElementById('el-to-fs').requestFullscreen(); // assuming polyfill

jsfiddle _{由于 StackSnippets® 过度保护的 iframe 将不允许访问或全屏显示。}

但如果你是，你就不会在 Chrome 中遇到这个问题（你仍然会在 FF 中遇到）。

因为虽然这个方法requires an user-gesture, postMessage being fast enough, you are able to use it with a same-origin frame在Chrome中是真的。

此浏览器发生的情况是跨源文档必须在能够调用 requestFullscreen.
之前收到用户手势一旦跨源框架被标记为由用户交互，那么您甚至可以从主文档的事件中调用 requestFullscreen：jsfiddle（仍然，仅在 Chrome).

但是，对于跨浏览器解决方案，您必须

将此内容加载为同源内容（例如使用代理）

或者使用一个小 hack，将 <iframe> 设置为全屏模式并让内部文档知道您这样做了，因此它可以相应地设置其文档的样式：jsfiddle
main.js

onclick = e => {
  frame.contentWindow.postMessage("you're going fullscreen", '*');
  frame.requestFullscreen();
};

frame.js

onmessage = e => {
  if(message.data === "you're going fullscreen") {
    // trigger our special fullscreen CSS
    document.documentElement.classList.add('fullscreen');
    // do some DOM cleaning if needed
  }
  else if(message.data === "you're exiting fullscreen") {
    document.documentElement.classList.remove('fullscreen');
  }
};

requestFullscreen 在消息事件处理程序中不再起作用

requestFullscreen works no more in message event handler

firefox

google-chrome

postmessage

html5-fullscreen