iframe,embedded和对象元素之间的区别

HTML5定义了几个embedded式内容元素,从鸟瞰angular度来看,它似乎非常类似于大致相同的点。

iframeembedobject之间的实际区别是什么?

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

<iframe>

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

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

<embed>

在HTML5中进行了标准化,在此之前,它是一个非标准的标签,所有主stream浏览器都承认这一标签。 HTML 5之前的行为可能会有所不同…

embedded元素为外部(通常是非HTML)应用程序或交互式内容提供了一个集成点。 ( HTML 5标准 – “ <embed>元素” )

用于embedded浏览器插件的内容。 对此的例外是SVG和HTML,根据标准不同地处理。

embedded式内容可以做什么和不可以做什么的细节取决于所涉及的浏览器插件。 但是对于SVG,你可以从父类访问embedded的SVG文件,如下所示:

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

从embedded的SVG或HTML文档中,您可以通过以下方式访问父级:

 parent = window.parent.document; 

对于embedded式的HTML,没有办法从父母(我已经find)的embedded式文档。

<object>

<object>元素可以表示一个外部资源,根据资源的types,这个资源将被视为一个图像,一个嵌套的浏览上下文,或者一个外部资源,由一个插件处理。 ( HTML 5标准 – “ <object>元素” )

结论

除非你embeddedSVG或静态的东西,否则你最好使用<iframe> 。 要包含SVG的使用<embed> (如果我没有记错的话<object>不会让你脚本*)。 老实说,我不知道你为什么要使用<object>除非用于旧的浏览器或Flash(我不工作)。

  • 正如下面的评论所指出的那样; <object>脚本将运行,但是父和子上下文不能直接通信。 使用<embed>您可以从父级获取子级的上下文,反之亦然。 这意味着他们可以在父级使用脚本来操作子级等等。这个部分对于<object><iframe>是不可能的,您必须在其中设置其他一些机制,例如JavaScript postMessage API 。

通过iframe使用object一个原因是对象重新调整embedded的内容的大小以适应对象的尺寸。 在iPhone 4s的Safari浏览器最显着,其中屏幕宽度为320px ,embedded的URL中的html可能会设置更大的尺寸。

在iframe上使用object另一个原因是object子资源(当<object>执行HTTP请求时)被视为passive/displayMixed content ,这意味着当您必须具有Mixed content时它更安全。

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

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