iframe，嵌入和对象元素之间的区别 [英] difference between iframe, embed and object elements

问题描述

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

什么是在 iframe ，嵌入和对象？ p>

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

解决方案

< iframe>

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

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

< embed>

在HTML 5中标准化，之前它是非标准标记，诚然，所有主流浏览器都已实施。 HTML 5之前的行为可能会有所不同...

embed元素为外部（通常是非HTML）应用程序提供集成点或互动内容。 （ HTML 5标准 - 元素）

用于嵌入浏览器插件的内容。除此之外，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 。

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.

What is the actual difference between iframe, embed and 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?

解决方案

<iframe>

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

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.

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

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

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

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 = document.getElementById("parent_id").getSVGDocument();

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

parent = window.parent.document;

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

<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")

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).

† 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.

这篇关于iframe，嵌入和对象元素之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！