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调用中转移“手势启动”标志？

请注意，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这个方法足够快，所以您able to use it with a same-origin frame在Chrome中。

在此浏览器中发生的是，跨域文档必须先收到用户手势，然后才能调用requestFullscreen。
一旦跨域框架被标记为与用户交互，那么即使在主文档事件中，您也可以调用requestFullscreen：jsfiddle（仍然，仅在Chrome中）。

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

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

或使用小技巧，在全屏模式下将<iframe>设置为onclick = e => { frame.contentWindow.postMessage("you're going fullscreen", '*'); frame.requestFullscreen(); };，并让内部文档知道您已这样做，因此可以相应地设置其文档的样式：jsfiddle
main.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');
  }
};

frame.js

SSO

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

1 个答案: