允许 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-iframe-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 不走运，因为听起来浏览器制造商正在制造黑客……而不是坚持 W3C 官方规范。任何其他属性都是可选的，可以随时弃用。

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