允许iframe成为全屏，跨浏览器

Posted 2021-04-05

我有一些代码用于在iframe中显示视频。如果用户想要在任何浏览器中切换到全屏模式，99％的时间都有效。

但是，我们在IE中找到了几个示例，其中全屏选项仅扩展为适合iframe的大小。

iframe标记呈现如下：

<iframe id="FrameContent" allowtransparency="true" frameborder="0" title="" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" src="/whatever.aspx" style="width: 1660px; height: 867px; visibility: visible;"></iframe>

所有父/子iframe都具有上述allowfullscreen属性。

然而，从这里和其他地方阅读，似乎共识只使用allowfullscreen，指定="true"。上面的一些代码将被更改为渲染如下 -

<iframe id="FrameContent" allowtransparency="true" frameborder="0" title="" allowfullscreen src="/whatever.aspx" style="width: 1660px; height: 867px; visibility: visible;"></iframe>

此外，其他（webkitallowfullscreen和mozallowfullscreen）似乎已被弃用，因此不再需要，这是正确的吗？

我已经看到其他建议，例如使用allowfullscreen="allowfullscreen"或allowfullscreen=""（因为="true"不起作用！）

我也看过msallowfullscreen和oallowfullscreen，我们目前没有使用它们。

任何人都能够澄清应该一劳永逸地使用什么？

答案

以下是一些您可能会觉得有用的链接。为了“澄清应该一劳永逸地使用什么”，请参阅W3.org链接。

1. 有关浏览器制造商必须构建iframe代码的官方规范，请访问W3C网站：https://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element
2. 由于W3C页面有点难以阅读，因此这里有一个易于阅读的iframe属性列表：http://www.w3schools.com/tags/tag_iframe.asp
3. 以下是每个浏览器的工作原理：http://caniuse.com/#search=iframe

听起来浏览器制造商正在将一些非符合W3C标准的属性再次添加到其某些标签中。 “allowFullScreen”属性确实属于param标记，但不属于iframe或视频标记本身。

<object type="application/x-shockwave-flash">
    <param name=allowfullscreen value=true>
    <video>...</video>
</object>

你可能对IE没有好运，因为它听起来像浏览器制造商正在制造黑客......而不是坚持官方的W3C规范。任何其他属性都是可选的，可以随时弃用。

如果您想要显示视频，请尝试在没有iframe标记的页面上构建视频。最受尊敬的视频服务公司将不会创建浏览器视频。这些广告可能会导致页面上的内容重叠出现问题。我认为你试图阻止使用iframe标签的问题是什么？