问题描述
HTML5 定义了几个嵌入的内容元素,从鸟瞰的角度来看,它们似乎非常相似,大致相同.
iframe
、embed
和 object
之间的实际区别是什么?
如果我想嵌入来自第三方站点的 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.
What is the actual difference between iframe
, embed
and object
?
<iframe>
<embed>
svg = document.getElementById("parent_id").getSVGDocument();
From inside an embedded SVG or HTML document you can reach the parent with:
parent = window.parent.document;
<object>
Conclusion
† 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 元素之间的区别的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!