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

Posted 2023-05-08

【中文标题】允许 iframe 成为全屏、跨浏览器

【英文标题】：Allowing an iframe to become full-screen, cross-browser

【发布时间】：2016-06-29 19:38:15

【问题描述】：

我有一些代码用于在 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，我们目前不使用它们。

谁能澄清一下应该一劳永逸地使用什么？

【问题讨论】：

这会侵入哪些 IE 版本？如果是旧版本，不支持这些版本不是更简单吗？

@Ian Kemp 它目前在 IE11 中中断，仅调整到 iframe 尺寸而不是全屏。无法在 Chrome 或 Firefox（两者的最新版本）中重现。

在 IE 中仅支持 allowfullscreen msdn.microsoft.com/en-us/library/…。请注意，您需要使用正确的 javascript 调用来调用它，developer.mozilla.org/en-US/docs/Web/API/Element/…

@TylerH - javascript调用到位，没有问题

您是否能够设置类似 if - allowfullscreen - alert - true 之类的警报，以区分条件是否不存在或 iframe 不响应它（如果存在）？认为 DLL 可能是一个线索，抱歉。

【参考方案1】：

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

浏览器制造商必须在 iframe 标签中构建的官方规范可在 W3C 网站上找到：https://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element 由于 W3C 页面有点难以阅读，这里有一个易于阅读的 iframe 属性列表：http://www.w3schools.com/tags/tag_iframe.asp 以下是适用于每个浏览器的内容：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 标记防止的问题？

【讨论】：

我建议不要使用 w3schools 链接 (meta.stackexchange.com/q/120621/212576>)，而是使用 devdocs.io/html/element/iframe

哦，这是一个漂亮的网站！我以前没有看过 devdocs.io，但它消除了所有在 w3schools 网站上普遍存在的广告。我必须为那个网站添加书签。 :)