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

iframe, embed和object之间的实际区别是什么?

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


当前回答

使用object而不是iframe的另一个原因是对象子资源(当<object>执行HTTP请求时)被认为是混合内容的被动/显示,这意味着当您必须拥有混合内容时它更安全。

混合内容意味着当你有https,但你的资源来自http。

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

其他回答

Iframe有“沙盒”属性,可能会阻止弹出等

使用object而不是iframe的另一个原因是对象子资源(当<object>执行HTTP请求时)被认为是混合内容的被动/显示,这意味着当您必须拥有混合内容时它更安全。

混合内容意味着当你有https,但你的资源来自http。

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

使用object而不是iframe的一个原因是object会重新调整嵌入内容的大小以适应对象的尺寸。最值得注意的是iPhone 4s的safari浏览器,它的屏幕宽度是320px,来自嵌入URL的html可以设置更大的尺寸。

< iframe >

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

主要用于包括来自其他域或子域的资源,但也可以用于包括来自同一域的内容。<iframe>的优点是嵌入的代码是“活动的”,可以与父文档通信。

<嵌入>

在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>元素可以表示外部资源,根据资源的类型,可以将其视为图像、嵌套的浏览上下文或由插件处理的外部资源。(HTML 5标准- " <object>元素")

结论

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

†如下文评论所述;<object>中的脚本将运行,但父上下文和子上下文不能直接通信。使用<embed>你可以从父对象获得子对象的上下文,反之亦然。这意味着你可以在父进程中使用脚本来操作子进程等等。这部分在<object>或<iframe>中是不可能的,在那里你必须设置一些其他的机制,比如JavaScript的postMessage API。