230

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

和之间iframe的实际区别是什么？embedobject

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

4

4 回答 4

157

<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>，除非用于较旧的浏览器或闪存（我不使用）。

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

于 2014-01-14T13:46:43.800 回答
33

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

于 2016-01-19T07:00:40.927 回答
5

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

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

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

于 2017-06-16T12:34:20.793 回答
3

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

于 2020-10-18T11:59:00.247 回答