乐闻世界logo
搜索文章和话题

What is the difference between iframe embed and object elements

6 个月前提问
3 个月前修改
浏览次数122

5个答案

1
2
3
4
5

Iframe(内联框架)和Object元素是HTML中嵌入内容的两种不同的方式。它们都可以用来嵌入例如视频、音频、PDF文档以及其他网页等内容,但它们之间存在一些关键的区别:

Iframe:

  • 定义:Iframe 是一个 HTML 元素,可以在当前HTML文档中嵌入另一个独立的HTML文档。
  • 使用场景:通常用于嵌入第三方内容,如地图、视频等。
  • 优势
    • 隔离性:Iframe中的内容与父页面是隔离的,它有自己的文档对象模型(DOM)。
    • 安全性:可以通过沙盒属性(sandbox)为嵌入的页面提供不同级别的限制,以增加安全性。
  • 灵活性:Iframe可以响应式地调整大小,适应不同的视口(viewport)。

Object:

  • 定义:Object 是一个HTML元素,用于嵌入多种类型的多媒体内容,包括Flash、PDF、Java applets等。
  • 使用场景:通常用于嵌入插件内容,这些内容需要特定的应用程序支持。
  • 优势
    • 类型支持:可以包含不同类型的数据,使用type属性指定MIME类型。
    • 回退内容:如果用户的浏览器不支持Object标签或无法加载内容,可以提供回退内容。
  • 灵活性:Object元素也支持使用参数(通过<param>标签)来提供给嵌入对象。

示例:

Iframe 示例

html
<iframe src="https://www.example.com" width="600" height="400"> <p>Your browser does not support iframes.</p> </iframe>

在这个例子中,一个外部网页被嵌入到当前页面中,并设定了宽高。

Object 示例

html
<object data="file.pdf" type="application/pdf" width="300" height="200"> <a href="file.pdf">Download PDF</a> </object>

在这个例子中,一个PDF文件被嵌入到网页中,如果浏览器不支持直接显示PDF,用户可以通过提供的链接下载PDF文件。

结论:

选择Iframe或Object主要取决于你需要嵌入什么类型的内容以及你对内容的隔离和控制的需求。Iframe 对于嵌入其他HTML文档(如YouTube视频)非常实用,而Object则更多地用于嵌入需要特定插件支持的内容。

2024年6月29日 12:07 回复

<iframe>

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

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

<embed>

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

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

用于嵌入浏览器插件的内容。SVG 和 HTML 是例外,它们根据标准的处理方式有所不同。

嵌入内容可以做什么和不能做什么的详细信息取决于相关的浏览器插件。但对于 SVG,您可以通过以下方式从父级访问嵌入的 SVG 文档:

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

从嵌入的 SVG 或 HTML 文档内部,您可以通过以下方式联系父级:

shell
parent = window.parent.document;

对于嵌入的 HTML,无法从父文档(我发现)获取嵌入文档。

<object>

<object>元素可以表示外部资源,根据资源的类型,该资源将被视为图像、嵌套浏览上下文或由插件处理的外部资源。(HTML 5 标准 - “元素<object>

结论

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

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

2024年6月29日 12:07 回复

使用objectover的原因之一iframe是对象会重新调整嵌入内容的大小以适应对象尺寸。最值得注意的是 iPhone 4s 中的 safari,其中屏幕宽度为320px,嵌入 URL 中的 html 可能会设置更大的尺寸。

2024年6月29日 12:07 回复

通过 iframe使用的另一个原因objectobject子资源(当<object>执行HTTP请求时)被视为根据passive/displayMixed content这意味着当您必须拥有 时它更安全Mixed content

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

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

2024年6月29日 12:07 回复

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

2024年6月29日 12:07 回复

你的答案