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

Question

我有一些代码用于在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,我们目前没有使用它们.

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

Answer 1

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

1. 有关浏览器制造商必须在 iframe 标记中构建哪些内容的官方规范可以在 W3C 网站上找到： https: //www.w3.org/TR/html5/embedded-content-0.html#the-if ​​rame-element
2. 由于 W3C 页面有点难以阅读，这里有一个易于阅读的 iframe 属性列表： http://www.w3schools.com/tags/tag_iframe.asp
3. 以下是每个浏览器的工作原理：http ://caniuse.com/#search=iframe

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

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

您可能对 IE 不那么幸运，因为听起来浏览器制造商正在创建 hack...而不是遵守官方 W3C 规范。任何其他属性都是可选的，并且可以随时弃用。

如果您想显示视频，请尝试在没有 iframe 标记的页面上构建它。大多数受人尊敬的视频服务公司都不会制作破坏浏览器的视频。这些广告可能会导致页面内容重叠出现问题。我认为这是您试图通过 iframe 标记来防止的问题？