HTML5 iFrame无缝属性

Question

在HTML5中,iframe具有"无缝"等新属性,应删除边框和滚动条.我已经尝试了但似乎没有用,我仍然可以看到滚动条和边框(我使用谷歌浏览器作为浏览器),这是我的代码:

<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>

知道为什么它不起作用吗？

还有一个问题是,是否可以在iframe中定位页面的特定部分？

Answer 1

更新时间:2016年10月

该seamless属性不再存在.它最初是为了包含在第一个HTML5规范中,但后来被删除了.一个不相关的同名属性在HTML5.1草案中做了一个简短的客串,但这也是在2016年中期抛弃:

所以我认为从实现者方面和网络开发方面来看,它的要点是,seamless所谓的并不是任何人想要开始的.或者至少它比任何人真正想要的更多.无论如何,就像@annevk所说的那样,似乎很多事情都是根据Shadow DOM"被事件克服".

换句话说:seamless从你的记忆中清除属性,并假装它从未存在过.

为了后人的缘故,这是我五年前的原始答案:

该属性目前处于草稿模式.出于这个原因,当前的浏览器都没有支持它(因为实现可能会发生变化).在此期间,最好只使用CSS从iframe中剥离边框/滚动条:

iframe[seamless]{
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

无缝属性比CSS可以添加更多:属性背后的部分原因是允许嵌套内容继承应用于iframe的相同样式(就好像嵌入文档是嵌套在元素中的一个大的,例如).

最后,Internet Explorer(8及更早版本)的版本需要其他属性才能删除边框,滚动条和背景颜色:

<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>

当然,这不会验证.所以由你来决定如何处理它.我(挑剔)的方法是嗅探代理字符串并添加早于9的IE版本的属性.

希望有所帮助.:)

`overflow:hidden;` - 不确定在这种情况下是否有意义.我认为无缝应该真正使它成为父文件的一部分; 因此,它更像是最大化(底部/顶部/左/右设置为0,如果iframe是文档中唯一的元素),它将具有适当的滚动,作为父文档的一部分,具有所有部分iframe可读.`overflow:hidden`根本不会这样做 - 它只会使iframe文件不可读. (3认同)
>该属性背后的部分原因是允许嵌套内容继承应用于iframe的相同样式//你应该告诉Mozilla的那些人,因为很遗憾[bug#631218](https://bugzilla.mozilla .org/show_bug.cgi？id = 631218)似乎没有提到任何一个.也许你可以添加指向它所说的规范中的链接.我真的很想看到它正在实施. (2认同)

Answer 2

根据今天发布的最新W3C HTML5推荐(可能是最终的HTML5标准),iframe元素中不再有无缝属性.它似乎已在标准化过程中的某处被删除.

根据caniuse.com,没有主要的浏览器支持这个属性(不再),所以你可能不应该使用它.

Answer 3

它尚未正确支持.

Chrome 31(可能还有早期版本)支持该属性的某些部分,但并不完全支持.

Chrome中的支持(在31测试版上测试)仅用于删除默认边框.滚动条在那里,大小不适应内容的要求,链接在内联框架内打开等等.因此,只支持当前定义的`seamless`中最简单的部分,可以轻松处理的部分CSS或`frameborder`属性. (5认同)
它现在支持chrome(2013):) (3认同)

Answer 4

以下是关于此主题的另一个演示文稿:http://benvinegar.github.com/seamless-talk/

您必须使用window.postMessage方法在父级和iframe之间进行通信.