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

Question

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

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

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

原文由 cnst 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<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 。

原文由 Jonas Schubert Erlandsson 发布，翻译遵循 CC BY-SA 4.0 许可协议