Html iframe、embed 和 object 元素之间的区别

difference between iframe, embed and object elements

提问by cnst

HTML5 defines several embedded content elements, which, from a bird's-eye view, seem to be very similar to the point of being largely identical.

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

What is the actual difference between iframe, embedand object?

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

If I want to embed an HTML file from a third-party site, which of these elements could I use, and how would they differ?

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

回答by Jonas Schubert Erlandsson

<iframe>

<iframe>

The iframe element represents a nested browsing context. HTML 5 standard - "The <iframe>element"

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

Primarily used to include resources from other domains or subdomains but can be used to include content from the same domain as well. The <iframe>'s strength is that the embedded code is 'live' and can communicate with the parent document.

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

<embed>

<embed>

Standardised in HTML 5, before that it was a non standard tag, which admittedly was implemented by all major browsers. Behaviour prior to HTML 5 can vary ...

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

The embed element provides an integration point for an external (typically non-HTML) application or interactive content. (HTML 5 standard - "The <embed>element")

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

Used to embed content for browser plugins. Exceptions to this is SVG and HTML that are handled differently according to the standard.

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

The details of what can and can not be done with the embedded content is up to the browser plugin in question. But for SVG you can access the embedded SVG document from the parent with something like:

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

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

From inside an embedded SVG or HTML document you can reach the parent with:

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

parent = window.parent.document;

For embedded HTML there is no way to get at the embedded document from the parent (that I have found).

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

<object>

<object>

The <object>element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin. (HTML 5 standard - "The <object>element")

该<object>元素可以表示外部资源，根据资源的类型，该资源将被视为图像、嵌套浏览上下文或由插件处理的外部资源。（HTML 5 标准 - “<object>元素”）

Conclusion

结论

Unless you are embedding SVG or something static you are probably best of using <iframe>. To include SVG use <embed>(if I remember correctly <object>won't let you script?). Honestly I don't know why you would use <object>unless for older browsers or flash (that I don't work with).

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

? As pointed out in the comments below; scripts in <object>will run but the parent and child contexts can't communicate directly. With <embed>you can get the context of the child from the parent and vice versa. This means they you can use scripts in the parent to manipulate the child etc. That part is not possible with <object>or <iframe>where you would have to set up some other mechanism instead, such as the JavaScript postMessage API.

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

回答by ivanixdev

One reason to use objectover iframeis that object re-sizes the embedded content to fit the object dimensions. most notable on safari in iPhone 4s where screen width is 320pxand the html from the embedded URL may set dimensions greater.

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

回答by harunurhan

Another reason to use objectover iframe is that objectsub resources (when an <object>performs HTTPrequests) are considered as passive/displayin terms of Mixed content, which means it's more secure when you must have Mixed content.

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

Mixed content means that when you have httpsbut your resource is from http.

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

Reference: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

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