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

Question

HTML5定义了几个嵌入式内容元素，从鸟瞰图来看，它们看起来非常相似，大致相同。

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

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

Answer 1

<iframe>

  

iframe元素表示嵌套的浏览上下文。 HTML 5 standard - "The <iframe> element"

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

<embed>

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

  

embed元素为外部（通常是非HTML）应用程序或交互式内容提供集成点。 （HTML 5 standard - "The <embed> element"）

用于嵌入浏览器插件的内容。例外情况是SVG和HTML，根据标准处理不同。

嵌入式内容可以做什么和不能做什么的细节取决于相关的浏览器插件。但对于SVG，您可以使用以下内容访问父级的嵌入式SVG文档：

svg = document.getElementById("parent_id").getSVGDocument();

从嵌入式SVG或HTML文档中，您可以通过以下方式访问父级：

parent = window.parent.document;

对于嵌入式HTML，无法从父级（我找到）获取嵌入式文档。

<object>

  

<object>元素可以表示外部资源，根据资源的类型，外部资源将被视为图像，嵌套浏览上下文或作为外部资源处理的外部资源。插入。 （HTML 5 standard - "The <object> element"）

结论

除非您正在嵌入SVG或静态内容，否则最好使用<iframe>。要包含SVG使用<embed>（如果我没记错<object>将不允许您编写脚本†）。老实说，我不知道为什么你会使用<object>，除非是旧的浏览器或flash（我不使用）。

†如下文评论所述; <object>中的脚本将运行，但父和子上下文无法直接通信。使用<embed>，您可以从父级获取子级的上下文，反之亦然。这意味着他们可以使用父级中的脚本来操纵子级等。<object>或<iframe>无法使用{{1}}或{{1}}来实现这一部分，例如{{3} }}

Answer 2

使用object而非iframe的一个原因是该对象会重新调整嵌入内容的大小以适应对象维度。最值得注意的是iPhone 4s中的safari，屏幕宽度为320px，而嵌入式网址中的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

Answer 4

iframe具有“沙盒”属性，可能会阻止弹出窗口等