Html HTML5 iFrame 无缝属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4804604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 iFrame Seamless Attribute
提问by Mauro74
in HTML5 the iframe has new attributes like 'seamless' that should remove borders and scrollbars. I've tried it but doesn't seem to work, I still can see scrollbars and borders (I'm using Google Chrome as browser), Here's my code:
在 HTML5 中，iframe 具有新的属性，例如“无缝”，可以移除边框和滚动条。我试过了，但似乎没有用，我仍然可以看到滚动条和边框（我使用 Google Chrome 作为浏览器），这是我的代码：
<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>
Any idea why it's not working?
知道为什么它不起作用吗？
One more question, is it possible to target a specific section of the page inside the iframe?
还有一个问题，是否可以在 iframe 内定位页面的特定部分？
采纳答案by delphi
It's not supported correctly yet.
它尚未得到正确支持。
Chrome 31 (and possibly an earlier version) supports some parts of the attribute, but it is not fully supported.
Chrome 31（可能还有更早的版本）支持该属性的某些部分，但并不完全支持。
回答by
Updated: October 2016
更新时间：2016 年 10 月
The seamlessattribute no longer exists. It was originally pitched to be included in the first HTML5 spec, but subsequently dropped. An unrelated attribute of the same name made a brief cameo in the HTML5.1 draft, but that toowas ditched mid-2016:
该seamless属性不再存在。它最初打算包含在第一个 HTML5 规范中，但后来被放弃了。一个不相关的同名属性在 HTML5.1 草案中做了一个简短的客串，但在2016 年年中也被抛弃了：
So I think the gist of it all both from the implementor side and the web-dev side is that
seamlessas-specced doesn't seem to be what anybody wanted to begin with. Or at least it's more than anybody actually wanted. And anyway like @annevksays, it's seems a lot of it's since been “overcome by events” in light of Shadow DOM.
所以我认为从实现者和网络开发者的角度来看，这一切的要点是，
seamless按规格似乎并不是任何人想要开始的。或者至少它比任何人实际想要的都要多。无论如何，就像@annevk所说的那样，从 Shadow DOM 的角度来看，似乎有很多事情已经“被事件克服了”。
In other words: purge the seamlessattribute from your memory, and pretend it never existed.
换句话说：seamless从您的记忆中清除该属性，并假装它从未存在过。
For posterity's sake, here's my original answer from five years ago:
为了后代，这是我五年前的原始答案：
Original answer: April 2011
原答案：2011 年 4 月
The attribute is in draft mode at the moment. For that reason, none of the current browsers are supporting it yet (as the implementation is subject to change). In the meantime, it's best just to use CSS to strip the borders/scrollbars from the iframe:
该属性目前处于草稿模式。出于这个原因，当前的浏览器尚不支持它（因为实现可能会发生变化）。同时，最好使用 CSS 从 iframe 中去除边框/滚动条：
iframe[seamless]{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}
There's more to the seamless attribute than what can be added with CSS: part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe (acting as though the embedded document was one big nested inside the element, for example).
除了可以使用 CSS 添加的内容之外，无缝属性还有更多内容：该属性背后的部分原因是允许嵌套内容继承应用于 iframe 的相同样式（就像嵌入的文档是嵌套在元素中的一个大文件一样，例如）。
Lastly, versions of Internet Explorer (8 and earlier) require additional attributes in order to remove the borders, scrollbars and background colour:
最后，Internet Explorer 版本（8 及更早版本）需要附加属性才能删除边框、滚动条和背景颜色：
<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>
Naturally, this doesn't validate. So it's up to you how to handle it. My (picky) approach would be to sniff the agent string and add the attributes for IE versions earlier than 9.
自然，这不会验证。所以这取决于你如何处理它。我的（挑剔）方法是嗅探代理字符串并为早于 9 的 IE 版本添加属性。
Hope that helps. :)
希望有帮助。:)
回答by Dynalon
According to the latest W3C HTML5 recommendation (which is likely to be the final HTML5 standard) published today, there is no seamless attribute in the iframe elementanymore. It seems to have been removed somewhere in the standardization process.
根据今天发布的最新 W3C HTML5 推荐标准（很可能是最终的 HTML5 标准），iframe 元素中不再有无缝属性。它似乎已在标准化过程中的某处删除。
According to caniuse.comno major browser does support this attribute (anymore), so you probably shouldn't use it.
根据caniuse.com，没有主流浏览器支持这个属性（不再），所以你可能不应该使用它。
回答by volf
It is possible to use the semless attribute right now, here i found a german article http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html
现在可以使用 semless 属性，在这里我找到了一篇德国文章http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html
and here are another presentation about this topic: http://benvinegar.github.com/seamless-talk/
这是关于这个话题的另一个演讲：http: //benvinegar.github.com/seamless-talk/
You have to use the window.postMessage method to communicate between the parent and the iframe.
您必须使用 window.postMessage 方法在父级和 iframe 之间进行通信。
回答by Shahar
I thought this might be useful to someone:
我认为这可能对某人有用：
in chrome version 32, a 2-pixels border automatically appears around iframes without the seamless attribute. It can be easily removed by adding this CSS rule:
在 chrome 版本 32 中，没有无缝属性的 iframe 周围会自动出现一个 2 像素的边框。通过添加以下 CSS 规则可以轻松删除它：
iframe:not([seamless]) { border:none; }
Chrome uses the same selector with these default user-agent styles:
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;
}
回答by Tony O'Hagan
iO8 has removedsupport for the iframe seamless attribute.
iO8 已取消对 iframe 无缝属性的支持。
- Tested in Safari, HomeScreen, new WKWebView and UIWebView.
- 在 Safari、HomeScreen、新的 WKWebView 和 UIWebView 中测试。
Full Details and performance review of other iOS 8 changes:
其他 iOS 8 更改的完整详细信息和性能评估：
回答by Esteban
I couldn't find anything that met my requirements, hece I came up with this script (depends on jQuery):
我找不到任何符合我要求的东西，因此我想出了这个脚本（取决于 jQuery）：
https://gist.github.com/invernizzie/95182de86ea9dc5daa80
https://gist.github.com/invernizzie/95182de86ea9dc5daa80
It will resize the iframe to the viewport size (taking into account wider content). It could use an improvement to use the viewport height instead of the content height, in the case that the former is bigger.
它会将 iframe 的大小调整为视口大小（考虑到更广泛的内容）。在前者更大的情况下，它可以使用改进来使用视口高度而不是内容高度。
回答by Juan Carlos Alpizar Chinchilla
Still at 2014 seamless iframe is not fully supported by all of the major browsers, so you should look for an alternative solution.
仍然在 2014 年，所有主要浏览器都不完全支持无缝 iframe，因此您应该寻找替代解决方案。
By January 2014 seamless iframe is still not supported for Firefox neither IE 11, and it's supported by Chrome, Safari and Opera (the webkit version)
到 2014 年 1 月，Firefox 和 IE 11 仍然不支持无缝 iframe，Chrome、Safari 和 Opera（webkit 版本）支持它
If you wanna check this and more supported options in detail, the HTML5 test site would be a good option:
如果您想详细检查这个和更多支持的选项，HTML5 测试站点将是一个不错的选择：
http://html5test.com/results/desktop.html
http://html5test.com/results/desktop.html
You can check different platforms, at the score section you can click every browser and see what's supported and what's not.
您可以检查不同的平台，在分数部分，您可以单击每个浏览器并查看支持和不支持的内容。
回答by Yagisanatode
You only need to write
你只需要写
seamless
无缝的
in your code. There is not need for:
在你的代码中。不需要：
seamless ="seamless"
无缝=“无缝”
I just found this out myself.
我只是自己发现了这一点。
EDIT - this does not remove scrollbars. Strangely
编辑 - 这不会删除滚动条。奇怪的是
scrolling="no" still seems to work in html5. I have tried using the overflowfunction with an inline style as recommended by html5 but this doesn't work for me.
scrolling="no" 似乎在 html5 中仍然有效。我曾尝试使用html5 推荐的内联样式的溢出函数，但这对我不起作用。
回答by Alex Williams
Use the frameborder attribute on your iframe and set it to frameborder="0" . That produces the seamless look. Now you maybe saying I want the nested iframe to control rather I have scroll bars. Then you need to whip up a JavaScript script file that calculates height minus any headers and set the height. Debounce is javascript plugin needed to make sure resize works appropriately in older browsers and sometimes chrome. That will get you in the right direction.
在 iframe 上使用 frameborder 属性并将其设置为 frameborder="0" 。这会产生无缝的外观。现在你可能会说我想要嵌套的 iframe 来控制而不是我有滚动条。然后你需要创建一个 JavaScript 脚本文件，计算高度减去任何标题并设置高度。Debounce 是 javascript 插件，需要确保调整大小在旧浏览器中正常工作，有时在 chrome 中也能正常工作。这将使您朝着正确的方向前进。
