HTML5 iFrame无缝属性

76

在HTML5中,iframe有一些新的属性,比如“seamless”可以去除边框和滚动条。我已经尝试了,但好像没有起作用,我仍然可以看到滚动条和边框(我正在使用谷歌浏览器),以下是我的代码:

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

有任何想法为什么它不起作用吗?

还有一个问题,是否可以在iframe内部针对页面的特定部分进行定位?


4
自2016年6月21日HTML 5.1候选建议不再包含“无缝”的属性以来,它似乎没有被任何现代浏览器支持。您无法使用此属性。 - Albert Wiersch
10个回答

143

更新时间:2016年10月

seamless 属性已经不存在了。它最初被提议包含在第一个 HTML5 规范中,但随后被删除。同名的不相关属性曾在 HTML5.1 草案中短暂亮相,但是在2016年中期被放弃:

因此,我认为从实施者和 Web 开发者的角度来看,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>

显然,这并没有经过验证。所以你需要自己决定如何处理它。我的(挑剔的)做法是嗅探代理字符串,并为 IE 9 之前的版本添加属性。


3
overflow: hidden; 在这个上下文中可能没有意义。我认为“seamless”应该字面意思上使它成为父文档的一部分;因此,它更像是被最大化了(如果iframe是文档中唯一的元素,则底部/顶部/左侧/右侧设置为0),并且它会有适当的滚动条,作为父文档的一部分,所有iframe的内容都是可读的。 overflow: hidden 完全不能做到这一点 - 它只会使iframe文档不可读。 - cnst
2
属性背后的部分原因是允许嵌套内容继承应用于 iframe 的相同样式。你应该告诉 Mozilla 的开发人员,因为遗憾的是 bug #631218 似乎没有提到任何相关信息。也许你可以添加规范中说明这一点的链接。我真的很想看到它被实现。 - anon
如果您需要滚动iframe,除非正确设置其尺寸,否则此方法将无效。如果有人需要,请查看我的答案。https://dev59.com/1G445IYBdhLWcg3wiq8i#26873886 - Esteban

61
根据最新的W3C HTML5推荐(可能是最终HTML5标准)今天发布的内容,iframe元素中不再有seamless属性。在标准化过程中,它似乎已被删除。
根据caniuse.com,现在没有主流浏览器支持这个属性,所以你可能不应该使用它。

2
这是正确的答案。@Mauro74请将正确答案更新为dyna的答案。 - Vad1mo
4
然而,它出现在HTML 5.1工作草案中(2015年7月9日的版本)。看起来它被推迟了,而不是被删除了。 - Tanriol
以下是关于编程的相关内容,请将 @Tanriol 的评论(版本2015-10-08)的链接转换为中文 http://www.w3.org/html/wg/drafts/html/master/single-page.html#attr-iframe-seamless - retrovertigo
仍然没有主流浏览器支持,但它已经重新出现在HTML5.1草案中:https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html#seamless-iframe - Michael Berry
1
“seamless”属性在2016年6月21日HTML 5.1候选推荐中已不再存在。 - Albert Wiersch
显示剩余2条评论

31

目前还没有得到正确支持。

Chrome 31(或更早版本)支持该属性的某些部分,但并没有完全支持。


3
现在(2013年)Chrome已经支持了 :) - jave.web
现在iOS7已经支持此功能。 - Winfield
5
Chrome浏览器(在31 beta版本中进行了测试)仅支持去除默认边框的功能。滚动条存在,大小不会根据内容要求自适应,链接将在内联框架内打开等。所以,目前定义的seamless的大部分只有最琐碎的部分得到了支持,这些部分可以使用CSS或frameborder属性轻松处理。 - Jukka K. Korpela
1
这个答案已经过时了。正确的答案应该更新为@dyna的答案。 - Vad1mo
以前不支持,现在也不支持。 - KTibow

6

1
那个演示对于实现无缝的功能非常有帮助。 - digitalPBK
这篇德语文章实际上非常有帮助(当然,如果你会说德语的话)。对我来说最有趣的是,“无缝”在本地(使用file://协议)不受支持。 - Marcel

2

我认为这可能对某些人有用:

在Chrome 32版本中,如果rames没有无缝属性,它会自动显示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;
}

2

0

我找不到符合我的要求的东西,因此我写了这个脚本(依赖于jQuery):

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

它将调整 iframe 的大小以适应视口大小(考虑到更宽的内容)。 如果前者更大,它可以改进为使用视口高度而不是内容高度。


0
使用iframe的frameborder属性,并将其设置为frameborder="0"。这样可以产生无缝的外观。现在你可能会说我想让嵌套的iframe来控制是否有滚动条。那么你需要编写一个JavaScript脚本文件来计算高度减去任何标题并设置高度。Debounce是一个JavaScript插件,需要确保在旧浏览器和有时候的Chrome中适当地工作。这将使你朝着正确的方向前进。

0

你只需要在你的代码中写入

seamless

就可以了。不需要:

seamless ="seamless"

我刚刚发现这个问题。

编辑 - 这并不能去除滚动条。奇怪的是,

scrolling="no" 在html5中仍然有效。我尝试使用html5推荐的内联样式的overflow函数,但对我来说这并不起作用。


8
在XHTML中,禁止使用属性最小化,而seamless属性必须定义为<iframe seamless="seamless"> - Oriol
5
不是问题的答案。 - Jukka K. Korpela
@oriol HTML5包含XHTML,而且它对属性最小化非常友好。 - Indolering
1
@Indolering 是的,但我的意思是有些人(比如我)喜欢XHTML的严格性,即使使用HTML5也是如此。因此,这只是一个不解决问题的个人偏好。 - Oriol
如果您想要多语言标记,其可用性不应被低估,那么您不能使用最小化属性。 - Sebastian

0

直到2014年,不是所有主流浏览器都完全支持无缝iframe,因此您应该寻找替代方案。

到2014年1月,Firefox和IE 11仍未支持无缝iframe,但它受到Chrome、Safari和Opera(webkit版本)的支持。

如果您想详细了解更多支持选项,请访问HTML5测试网站:

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

您可以检查不同的平台,在分数部分,您可以单击每个浏览器并查看支持什么和不支持什么。


根据html5test.com网站,Chrome或Opera也不支持它。据说只有Safari 7(不是早期版本)存在支持。有人能确认即使在那里也存在支持吗? - Jukka K. Korpela
这是一个严重的缺陷,我在Opera(如前所述的webkit版本)和Chrome中使用了无缝的iframe,它们可以正常工作...这里有一个工作示例(移动幻灯片)http://acuitytec.com/howWorks_newhover.html 尝试观看它并比较Firefox和Opera,你会注意到在Chrome和Opera中内容看起来居中,而在FF中则显示在左侧。我个人在2014年1月进行了测试,也许有些变化,但在今天检查我链接的网站后,它仍然似乎以前描述的方式工作。 - Juan Carlos Alpizar Chinchilla
无论如何,对html5test.com的引用都不支持答案中的陈述。您需要指定您的示例如何支持有关支持的声明。“看起来居中”并不令人信服,因为“无缝”的主要含义是功能性的。 - Jukka K. Korpela
当第一篇帖子发表时,他们是在一月份完成的。我联系了 html5test.com 网站来澄清这个问题。无缝 iframe 应该能够将应用于 <iframe> 的 CSS 样式应用于所包含的文档,而不是指定在该文档中的样式。这些 iframes 有一个 css 类来将 iframe 居中在父容器中,无缝属性使得继承变得可能,只需查看 css 样式,然后移除无缝属性并查看发生了什么,你会注意到移除无缝属性后 iframe css 类被忽略了。 - Juan Carlos Alpizar Chinchilla

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接