HTML5定义了几个嵌入的内容元素,从鸟瞰的角度来看,它们似乎非常相似,几乎完全相同。
iframe
、embed
和 object
之间的实际区别是什么?
如果我想嵌入来自第三方网站的 HTML 文件,我可以使用哪些元素,它们有何不同?
最佳答案
<iframe>
The iframe element represents a nested browsing context. HTML 5 standard - "The
<iframe>
element"
主要用于包含来自其他域或子域的资源,但也可用于包含来自同一域的内容。 <iframe>
的优势在于嵌入式代码是“实时的”并且可以与父文档进行通信。
<embed>
在 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")
用于为浏览器插件嵌入内容。异常(exception)情况是根据标准以不同方式处理的 SVG 和 HTML。
关于嵌入内容能做什么和不能做什么的细节取决于相关的浏览器插件。但是对于 SVG,您可以使用类似以下内容从父级访问嵌入式 SVG 文档:
svg = document.getElementById("parent_id").getSVGDocument();
从嵌入的 SVG 或 HTML 文档中,您可以通过以下方式访问父级:
parent = window.parent.document;
对于嵌入式 HTML,无法从父级(我找到的)获取嵌入式文档。
<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")
结论
除非您要嵌入 SVG 或其他静态内容,否则您最好使用 <iframe>
.要包含 SVG,请使用 <embed>
(如果我没记错的话 <object>
不会让你编写脚本†)。老实说,我不知道你为什么要使用 <object>
除非用于较旧的浏览器或 Flash(我不使用)。
† 正如下面的评论所指出的; <object>
中的脚本将运行,但父上下文和子上下文无法直接通信。与 <embed>
您可以从 parent 那里获得 child 的上下文,反之亦然。这意味着您可以在父级中使用脚本来操纵子级等。<object>
无法实现这一部分。或 <iframe>
您必须在其中设置一些其他机制,例如 the JavaScript postMessage API .
关于html - iframe、嵌入和对象元素之间的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16660559/