本文介绍了iframe、embed 和 object 元素之间的区别的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

iframeembedobject 之间的实际区别是什么?

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

解决方案

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

主要用于包含来自其他域或子域的资源,但也可用于包含来自同一域的内容. 的优势在于嵌入的代码是活的"并且可以与父文档通信.

在 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,无法从父级(我找到的)获取嵌入的文档.

元素可以表示一个外部资源,根据资源的类型,该元素将被视为图像、嵌套浏览上下文或外部资源由插件处理的资源.(HTML 5 标准 - 元素")

结论

除非您要嵌入 SVG 或静态内容,否则最好使用 <iframe>.要包含 SVG,请使用 (如果我没记错的话, 不会让您编写脚本†).老实说,我不知道您为什么要使用 <object> 除非用于较旧的浏览器或 flash(我不使用).

† 正如下面的评论所指出的; 中的脚本将运行,但父上下文和子上下文不能直接通信.使用 您可以从父级获取子级的上下文,反之亦然.这意味着他们可以在父级中使用脚本来操作子级等.使用 这部分是不可能的,你必须这样做改为设置一些其他机制,例如 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>

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

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>

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、embed 和 object 元素之间的区别的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-18 15:09
查看更多