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

问题描述 投票:22回答:1

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

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

javascript html iframe html5-video fullscreen
1个回答
3
投票

以下是一些您可能会觉得有用的链接。为了“澄清应该一劳永逸地使用什么”,请参阅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标签的问题是什么?

© www.soinside.com 2019 - 2024. All rights reserved.