更新时间：2016年10月

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草案中有一个不相关的同名属性，but that too在2016年中期被抛弃：

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

换句话说：从你的记忆中清除seamless属性，假装它从未存在过。

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

原始答案：2011年4月

此属性目前处于草稿模式。出于这个原因，当前的浏览器都没有支持它（因为实现可能会发生变化）。在此期间，最好只使用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版本的属性。

希望有所帮助。：）

Answer 2

根据今天发布的最新W3C HTML5推荐（可能是最终的HTML5标准），已经有no seamless attribute in the iframe element了。它似乎已在标准化过程中的某处被删除。

根据caniuse.com，没有主要的浏览器支持此属性（不再），所以你可能不应该使用它。

Answer 3

它尚未正确支持。

Chrome 31（可能还有早期版本）支持属性的某些部分，但不完全支持。

Answer 4

现在可以使用semless属性，在这里我发现了一篇德语文章http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html

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

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

Answer 5

我认为这可能对某人有用：

在Chrome版本32中，在没有无缝属性的iframe周围会自动出现一个2像素的边框。可以通过添加此CSS规则轻松删除它：

iframe:not([seamless]) { border:none; }

Chrome使用与这些默认用户代理样式相同的选择器：

iframe:not([seamless]) {
  border: 2px inset;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
}

Answer 6

iO8对iframe无缝属性的已移除支持。

在Safari，HomeScreen，新的WKWebView和UIWebView中测试。

其他iOS 8更改的完整详细信息和效果评估：

Answer 7

你只需要写

无缝

你的代码中的

。不需要：

无缝=“无缝”

我刚刚发现了这个。

编辑 - 这不会删除滚动条。奇怪的是

SCROLLING = “否” 仍然似乎在html5中工作。我尝试使用html5推荐的内联样式的溢出函数，但这对我不起作用。

Answer 8

在iframe上使用frameborder属性并将其设置为frameborder =“0”。这产生了无缝的外观。现在你可能会说我希望嵌套的iframe能够控制而不是我有滚动条。然后你需要编写一个JavaScript脚本文件来计算高度减去任何标题并设置高度。 Debounce是javascript插件，用于确保调整大小在旧版浏览器中有效，有时也适用于chrome。那会让你朝着正确的方向前进。

Answer 9

仍然在2014年，所有主流浏览器都不完全支持无缝iframe，因此您应该寻找替代解决方案。

截至2014年1月，Firefox和IE 11仍然不支持无缝iframe，Chrome，Safari和Opera（webkit版本）支持

如果您想详细检查这个以及更多支持的选项，HTML5测试网站将是一个不错的选择：

http://html5test.com/results/desktop.html

您可以检查不同的平台，在分数部分，您可以单击每个浏览器，查看支持的内容和不支持的内容。

Answer 10

我找不到符合我要求的任何内容，但是我想出了这个脚本（取决于jQuery）：

https://gist.github.com/invernizzie/95182de86ea9dc5daa80

它会将iframe的大小调整为视口大小（考虑到更广泛的内容）。在前者较大的情况下，它可以使用改进来使用视口高度而不是内容高度。

HTML5 iFrame无缝属性

10 个答案:

更新时间：2016年10月

原始答案：2011年4月