HTML5 iFrame 无缝属性

Posted 2023-03-05

【中文标题】HTML5 iFrame 无缝属性

【英文标题】：HTML5 iFrame Seamless Attribute

【发布时间】：2011-06-15 19:58:08

【问题描述】：

在 html5 中，iframe 具有诸如“无缝”之类的新属性，可以移除边框和滚动条。我已经尝试过，但似乎不起作用，我仍然可以看到滚动条和边框（我使用 Google Chrome 作为浏览器），这是我的代码：

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

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

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

【问题讨论】：

“无缝”属性在 2016 年 6 月 21 日 HTML 5.1 候选推荐中不再出现在 HTML 5.1 中......而且似乎没有任何当前浏览器支持。

【参考方案1】：

更新日期：2016 年 10 月

seamless 属性不再存在。它最初计划包含在第一个 HTML5 规范中，但随后被放弃。一个不相关的同名属性在 HTML5.1 草案中做了一个简短的客串，but that too 在 2016 年年中被抛弃：

所以我认为无论从实现者还是 web 开发者的角度来看，这一切的要点是 seamless as-specced 似乎并不是任何人想要开始的。或者至少它比任何人真正想要的要多。无论如何，就像 @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 版本添加属性。

希望对您有所帮助。 :)

【讨论】：

overflow: hidden; -- 不确定在这种情况下是否有意义。我认为无缝应该从字面上使它成为父文档的一部分；因此，它更像是被最大化（底部/顶部/左侧/右侧设置为 0，如果 iframe 是文档中的唯一元素），并且它将具有适当的滚动，作为父文档的一部分，所有部分iframe 可读。 overflow: hidden 根本不会这样做——它只会使 iframe 文档不可读。

> 属性背后的部分原因是允许嵌套内容继承应用于 iframe 的相同样式 // 你应该告诉 Mozilla 的人，因为遗憾的是 bug #631218 没有似乎没有提到任何一个。也许您可以将链接添加到规范中所说的位置。我真的很想看到它被实施。

如果您需要滚动 iframe，这将不起作用，除非您正确设置其尺寸。如果有人需要，请在下面找到我的答案。 ***.com/a/26873886/606885

【参考方案2】：

根据今天发布的最新 W3C HTML5 推荐（很可能是最终的 HTML5 标准），no seamless attribute in the iframe element 不再存在。它似乎已在标准化过程中的某个地方被删除。

根据caniuse.com，没有主流浏览器确实支持这个属性（现在），所以你可能不应该使用它。

【讨论】：

这是正确的答案。 @Mauro74 请将正确答案更新为来自 dyna 的答案

但是，它存在于 HTML 5.1 工作草案（2015-07-09 版本）中。看起来它被推迟了，而不是被删除。

这里是@Tanriol 评论的链接（2015-10-08 版）w3.org/html/wg/drafts/html/master/…

更多关于删除无缝属性的信息：github.com/whatwg/html/issues/331 和 github.com/w3c/html/issues/35

自 2016 年 6 月 21 日 HTML 5.1 候选推荐标准起，HTML 5.1 中不再包含“无缝”属性。

【参考方案3】：

目前还不支持。

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

【讨论】：

现在 chrome (2013) 支持它:)

现在ios7支持这个。

Chrome 中的支持（在 31 beta 上测试）仅用于删除默认边框。滚动条在那里，大小不适应内容的要求，在内联框架内打开链接等。所以只支持当前定义的seamless中最琐碎的部分，可以轻松处理的部分CSS 或 frameborder 属性。

这个答案不再是最新的了。正确答案应该更新为@dyna的答案

原来不支持，现在也不支持了。

【参考方案4】：

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

这里是关于这个主题的另一个演讲：http://benvinegar.github.com/seamless-talk/

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

【讨论】：

该演示文稿有助于实现无缝的功能

德语文章实际上很有帮助（如果您当然会说德语）。对我来说最有趣的是本地不支持“无缝”（使用 file:// 协议）

【参考方案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;

【参考方案6】：

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

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

其他 iOS 8 更改的详细信息和性能评估：

iOS8 changes on Cordova mailing list Sencha.com Blog : Apple Shows Love for HTML5 with iOS 8

【参考方案7】：

你只需要写

无缝

在您的代码中。不需要：

无缝=“无缝”

这是我自己发现的。

EDIT - 这不会删除滚动条。奇怪

滚动=“否” 似乎仍然可以在 html5 中使用。我尝试过使用 overflow 函数和 html5 推荐的内联样式，但这对我不起作用。

【讨论】：

在XHTML中，属性最小化是被禁止的，无缝属性必须定义为<iframe seamless="seamless">

不是问题的答案。

@oriol HTML5 包含了 XHTML，它的属性最小化非常酷。

@Indolering 是的，但我的意思是有些人（比如我）喜欢 XHTML 的严格性，即使在使用 HTML5 时也是如此。所以这只是个人喜好，并不能解决问题。

如果你想要多语言标记，它的可用性不容小觑，你不能使用最小化属性

【参考方案8】：

使用 iframe 上的 frameborder 属性并将其设置为 frameborder="0" 。这会产生无缝的外观。现在你可能会说我想要嵌套的 iframe 来控制而不是我有滚动条。然后你需要创建一个 javascript 脚本文件，计算高度减去任何标题并设置高度。 Debounce 是一个 javascript 插件，用于确保调整大小在较旧的浏览器和有时 chrome 中正常工作。这会让你朝着正确的方向前进。

【参考方案9】：

到 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（不是早期版本）中。任何人都可以确认那里存在支持吗？

这是一个严重的缺陷，我在 Opera（如前所述的 webkit 版本）和 Chrome 中使用了无缝 iframe，它们可以工作......这是一个工作示例（跨幻灯片移动）acuitytec.com/howWorks_newhover.html 尝试观看它和 firefox vs Opera，你会注意到在 chrome 和 Opera 中内容看起来居中，而在 FF 中它显示在左侧。我个人在 2014 年 1 月之前进行了测试，可能发生了一些变化，但是在检查了我今天链接的这个网站之后，它似乎仍然像之前描述的那样工作

无论如何，对 html5test.com 的引用确实不支持答案中的陈述。并且您需要指定您的示例如何支持有关支持的声明。 “看起来居中”并不令人信服，因为seamless 的主要含义是功能性的。

他们在 1 月发布第一篇文章时就这样做了，我联系了 html5test.com 网站以澄清这一点。无缝 iframe 应该能够在该文档中指定的样式之前将应用于

【参考方案10】：

我找不到任何符合我要求的东西，因此我想出了这个脚本（取决于 jQuery）：

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

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