iframe，嵌入和对象元素之间的区别

176

HTML5定义了几个嵌入的内容元素，从鸟瞰的角度看，它们似乎在很大程度上是相同的。

是什么之间的实际差异iframe，embed和object？

如果我想从第三方站点嵌入HTML文件，我可以使用其中哪些元素，它们之间会有什么不同？

html iframe

— cnst
source

他们看起来根本不一样。第三方网站将是iframe。

— Kai Qing

嵌入vs对象子集：stackoverflow.com/questions/1244788/embed-vs-object，iframe vs对象子集：stackoverflow.com/questions/924946/…，嵌入VS对象VS视频：stackoverflow.com/questions/11199048/...

— Ciro Santilli郝海东冠状病六四事件法轮功

@KaiQing您是否认为它们看起来相同还是很明显，OP并不同意。哦，顺便说一句，这也不是他的问题的答案。

— Malik A. Rumi

@Malik-这就是为什么要发表评论的原因。不，看起来相同并不是我的观点，因为每种定义都清楚地概述了差异以及何时使用每种差异。从理论上讲，它们在前端的显示方式可能看起来相同，但我认为OP的上下文是使用情况而不是外观。该评论旨在说明您将按照他们的要求将iframe用于第三方。我只能以为自己当时太忙而无法写出完整的答案。

— 凯庆

现在MDN有了详细的说明developer.mozilla.org/en-US/docs/Learn/HTML/…–

— ohkts11

Answers:

122

`<iframe>`

iframe元素表示嵌套的浏览上下文。HTML 5标准-“ <iframe>元素”

主要用于包含来自其他域或子域的资源，但也可以用于包含来自同一域的内容。将<iframe>的实力，嵌入式代码是‘活的’，可与父文档通信。

`<embed>`

在此之前，以HTML 5进行了标准化，但之前它是一个非标准标记，所有主流浏览器都实现了该标记。HTML 5之前的行为可能有所不同...

embed元素为外部（通常为非HTML）应用程序或交互式内容提供集成点。（HTML 5标准-“ <embed>元素”）

用于嵌入浏览器插件的内容。SVG和HTML例外，它们根据标准进行了不同的处理。

嵌入内容可以做什么和不能做什么的细节取决于所涉及的浏览器插件。但是对于SVG，您可以通过以下方式从父级访问嵌入式SVG文档：

svg = document.getElementById("parent_id").getSVGDocument();

在嵌入式SVG或HTML文档中，您可以通过以下方式到达父级：

parent = window.parent.document;

对于嵌入式HTML，无法从父级（我发现）获取嵌入式文档。

`<object>`

所述<object>元件可以表示外部资源，其中，根据不同的资源的类型，要么被视为图像，作为嵌套浏览上下文，或作为外部资源由一个插件来处理。（HTML 5标准-“<object>元素”）

结论

除非要嵌入SVG或静态对象，否则最好使用<iframe>。包括SVG使用<embed>（如果我没记错的话，<object>不会让您编写脚本†）。老实说，我不知道为什么要使用它，<object>除非用于较旧的浏览器或Flash（我不使用）。

†如以下评论所指出；中的脚本<object>将运行，但是父级和子级上下文无法直接通信。有了它，<embed>您可以从父级获取子级的上下文，反之亦然。这意味着他们可以在父级中使用脚本来操作子级等。这部分无法通过<object>或<iframe>在其他地方设置其他机制来实现，例如JavaScript postMessage API。

— 乔纳斯·舒伯特·埃兰森
source

embed非常适合使访问者遵循源自阻止框架的网站的重定向链。（我们用它来启动联盟登录。）

— 2015年

关于“对象不会让脚本”的说法不正确。schepers.cc/svg/blendups/embedding.html

— Dzenly 2015年

@Dzenly例如，在中声明的脚本以及包含在SVG中的脚本<object>将运行，但是无法（或我没有管理）从父页面获取对象的上下文。因此，“内部”脚本将运行，从对象的角度来看，“外部”脚本无法与对象上下文进行通信。

— 乔纳斯·舒伯特·埃兰森

— 巴绍（Bachsau）

@Bachsau，因为这是关于不同选项及其折衷的讨论，所以单单说出<iframe />要走的路是错误的。帖子的全部重点是它们都是不同的。<embed>仍在规范中：w3.org/TR/html5/embedded-content-0.html#the-embed-element，因此提及它是合理的。我还发现，您认为这<embed>已经过时并在下一句话中提到Java applet 有点有趣：

— Jonas Schubert Erlandsson

使用object过度的原因之一iframe是对象会调整嵌入内容的大小以适合对象尺寸。最值得注意的是在iPhone 4s的苹果浏览器中，其屏幕宽度为，320px并且嵌入URL中的html可能会设置更大的尺寸。

— 伊万尼杰夫
source

您能否提供更多详细信息和/或参考？否则，这仅作为注释而不是答案。

— cnst

是的，但这是有帮助的评论

— Malik A. Rumi

这是我的用例，绝对是一个有用的注释。谢谢。

— Sid

iFrame + iPhone = iHeadache

— djvg

object在iframe 上使用的另一个原因是，object子资源（当<object>执行HTTP请求时）被视为passive/display用表示Mixed content，这意味着当您必须拥有Mixed content。

内容混合意味着您拥有https资源时却来自http。

参考：https : //developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

— 哈鲁努尔汗
source

根据链接文章的当前阅读情况似乎并非如此，该链接文章在主动和被动标题下都列出了对象。被动：“子资源（当一个<object>进行HTTP请求）” /状况：“<对象>（数据属性）”（后者是如何装入另一HTTP请求按原来问题

— 添阿贝尔