【问题标题】：difference between iframe, embed and object elementsiframe、embed 和 object 元素之间的区别
【发布时间】：2013-05-15 15:54:19
【问题描述】：

HTML5 定义了几个嵌入的内容元素，从鸟瞰的角度来看，它们似乎非常相似，几乎完全相同。

iframe、embed 和 object 之间的实际区别是什么？

如果我想嵌入来自第三方网站的 HTML 文件，我可以使用其中哪些元素，它们有何不同？

【问题讨论】：

它们看起来完全不一样。第三方网站将是 iframe。
嵌入与对象子集：stackoverflow.com/questions/1244788/embed-vs-object，iframe 与对象子集：stackoverflow.com/questions/924946/…，嵌入与对象与视频：stackoverflow.com/questions/11199048/…
@KaiQing 他们看起来是否相同是你的意见，显然不被OP分享。哦，顺便说一句，这也不是他问题的答案。
@Malik - 这就是为什么它是一个评论。不，看起来相同不是我的意见，因为每个定义都清楚地概述了差异以及何时使用它们。从理论上讲，它们在前端的显示方式可能看起来相同，但我认为 OP 的上下文是在使用而不是外观。该评论是为了说明您将按照他们的要求将 iframe 用于第三方。我只能假设我当时太忙了，无法写出完整的答案。
现在MDN有详细解释developer.mozilla.org/en-US/docs/Learn/HTML/…

标签： html iframe

【解决方案1】：

`<iframe>`

iframe 元素表示嵌套的浏览上下文。 HTML 5 standard - "The <iframe> element"

主要用于包含来自其他域或子域的资源，但也可用于包含来自同一域的内容。 <iframe> 的优势在于嵌入的代码是“活的”并且可以与父文档进行通信。

`<embed>`

在 HTML 5 中标准化，在此之前它是一个非标准标签，无可否认，所有主流浏览器都实现了它。 HTML 5 之前的行为可能会有所不同...

embed 元素为外部（通常是非 HTML）应用程序或交互式内容提供了一个集成点。 (HTML 5 standard - "The <embed> element")

用于嵌入浏览器插件的内容。 SVG 和 HTML 的例外情况是根据标准以不同方式处理。

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

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

从嵌入的 SVG 或 HTML 文档中，您可以通过以下方式访问父级：

parent = window.parent.document;

对于嵌入式 HTML，无法从父级（我已经找到）获取嵌入式文档。

`<object>`

<object> 元素可以表示外部资源，根据资源的类型，该资源将被视为图像、嵌套浏览上下文或由插件处理的外部资源。 (HTML 5 standard - "The <object> element")

结论

除非您嵌入 SVG 或其他静态内容，否则您最好使用 <iframe>。要包含 SVG，请使用 <embed>（如果我没记错的话，<object> 不会让你编写脚本†）。老实说，我不知道你为什么要使用<object>，除非是旧版浏览器或闪存（我不使用）。

† 正如下面的 cmets 所指出的； <object> 中的脚本将运行，但父上下文和子上下文无法直接通信。使用<embed>，您可以从父级获取子级的上下文，反之亦然。这意味着他们可以使用父级中的脚本来操纵子级等。这部分对于 <object> 或 <iframe> 是不可能的，您必须设置一些其他机制，例如 the JavaScript postMessage API。

【讨论】：

embed 非常适合让访问者关注源自阻止框架的网站的重定向链。（我们用它来启动联合登录。）
关于“对象不允许脚本”的说法不正确。schepers.cc/svg/blendups/embedding.html
@Dzenly 例如，在 <object> 中声明的脚本和包含的 SVG 将运行，但不可能（或者我没有设法）从父页面。所以“内部”脚本会运行，“外部”脚本，从对象的角度来看，不能与对象上下文通信。
真的过时了。我不会再用它做任何事情了。今天，每个主流浏览器都能够为每个可能的插件使用对象。如果您想使用 flash 并定义其类型而不是 CLSID，它将在每个浏览器中以相同的方式工作。它甚至可以运行 java 小程序。但是，我仍然会使用 iframe 来嵌入外部页面。
@Bachsau 因为这是关于不同选项及其权衡的讨论，所以只是茫然地说<iframe /> 是要走的路感觉不对。这篇文章的重点是它们都是不同的。 <embed> 仍在规范中：w3.org/TR/html5/embedded-content-0.html#the-embed-element，因此提及它是有道理的。我还觉得你争论 <embed> 已经过时并在下一句中提到 Java 小程序，这有点好笑:)

【解决方案2】：

使用object 而不是iframe 的一个原因是对象会重新调整嵌入内容的大小以适合对象尺寸。最值得注意的是 iPhone 4s 中的 safari，其中屏幕宽度为 320px，并且来自嵌入 URL 的 html 可能会设置更大的尺寸。

【讨论】：

您能否提供更多详细信息和/或参考资料？否则，这只能作为评论，而不是作为答案。
是的，但这是一个有用的评论
这是我的用例，绝对是一个很有帮助的评论。谢谢。
iFrame + iPhone = iHeadache

【解决方案3】：

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

混合内容意味着当您拥有https 但您的资源来自http。

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

【讨论】：

根据当前对链接文章的阅读，情况似乎并非如此，该文章在主动和被动标题下列出了对象。被动：“子资源（当

【解决方案4】：

iframe 具有“沙盒”属性，可能会阻止弹出等

【讨论】：

&lt;iframe&gt;

&lt;embed&gt;

&lt;object&gt;

结论

`<iframe>`

`<embed>`

`<object>`