iframe,embed和object元素之间的区别

Question

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

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

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

Answer 1

<iframe>

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

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

<embed>

在HTML 5中标准化,之前它是一个非标准标记,无可否认,它是由所有主流浏览器实现的.HTML 5之前的行为可能会有所不同......

embed元素为外部(通常是非HTML)应用程序或交互式内容提供集成点.(HTML 5标准 - " <embed>元素")

用于嵌入浏览器插件的内容.例外情况是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>除非旧的浏览器或闪存(我不使用).

†如下文评论所述; <object>将运行脚本,但父和子上下文无法直接通信.有了<embed>你可以从父,反之亦然孩子的情况下.这意味着他们可以使用父级中的脚本来操作子级等.这部分是不可能的,<object>或者<iframe>您必须设置其他机制,例如JavaScript postMessage API.

Answer 2

使用的一个原因object在iframe是对象重新大小嵌入的内容,以适合对象的尺寸.最值得注意的是在屏幕宽度为的iPhone 4s中的safari,320px嵌入式URL中的html可能会设置更大的尺寸.

Answer 3

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

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

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