允许跨浏览器的iframe全屏显示

Question

我有一些代码，用于在 iframe 中显示视频。 99% 的情况下，当用户想要切换到全屏模式时，它都能在任何浏览器中正常工作。

然而，在 IE 中我们发现了一些例子，全屏选项只会扩展到框架的大小。

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，但我们目前没有使用它们。

有人能够澄清应该一劳永逸地使用什么吗？

- Terry Delahunt

---

这会影响哪些版本的IE？如果是旧版本，不支持这些版本是否更为简单？ - Ian Kemp

在IE中，它只支持allowfullscreen https://msdn.microsoft.com/en-us/library/dn312070%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396。请注意，您需要使用正确的JavaScript调用来调用它，https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen。 - TylerH

@TylerH - JavaScript调用已经就位，没有任何问题。 - Terry Delahunt

@Steve - 谢谢，但是那个dll问题涉及到一个与此无关的Infragistics dll。 - Terry Delahunt

你能否设置一种警报，例如 - allowfullscreen - alert - true之类的东西，以区分条件不存在还是iframe不响应它（如果它存在）？我以为DLL可能会给出一些线索，抱歉。 - Steve

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 浏览器可能会遇到问题，因为浏览器制造商正在创造hack，而不是遵循官方的W3C规范。任何其他属性都是可选的并且随时可能被弃用。

如果你想展示视频，请尝试在页面上构建它，而不使用iframe标签。大多数受人尊敬的视频服务公司不会创建破坏浏览器的视频。广告可能会导致页面上重叠内容的问题。我猜这就是你试图通过iframe标签来防止的问题？

- Clomp

---

我建议使用 https://devdocs.io/html/element/iframe，而不是 w3schools 的链接（https://meta.stackexchange.com/q/120621/212576）。 - hjpotter92

哦，这是一个很漂亮的网站！我以前没有见过devdocs.io，但它消除了w3schools网站上无处不在的广告。我得把这个网站加入书签 :) - Clomp