HTML 中 iframe 的替代方案

Subodh Poudel 2023年2月19日
  1. 在 HTML 中使用 object 标签作为 iframe 的替代品
  2. 在 HTML 中使用 embed 标签作为 iframe 的替代品
HTML 中 iframe 的替代方案

在 HTML 中,我们使用 iframe 来指定一个内联框架,通过它我们可以将网页嵌入到网页中。在本教程中,我们将介绍一些其他替代 Iframe 来显示网页的方法。

在 HTML 中使用 object 标签作为 iframe 的替代品

我们可以使用 HTML 中的 object 标签在网页中嵌入外部资源。我们可以使用标签在我们的网页中显示另一个网页。object 标签是 HTML 中 iframe 标签的替代品。我们可以使用标签来嵌入不同的多媒体组件,如图像、视频、音频等。object 标签有一个属性 data,我们可以在其中定义要嵌入的网页的 URL。我们甚至可以使用 widthheight 属性设置容器的宽度和高度。

例如,编写 object 标签并在 data 属性中设置 URL https://theuselessweb.com/。然后,将 object 标签的 widthheight 属性设置为 800。接下来,将 type 属性设置为 text/html。最后,关闭 object 标签。

当我们在浏览器中加载如下网页时,我们可以在一个容器中看到嵌入的网页。我们可以与嵌入的网页进行交互。text/html 类型表示嵌入的内容是 HTML。这样,我们可以使用 object 标签将网页嵌入到网页中,这可以替代 HTML 中的 iframe 标签。但是,最好使用 iframe 标签而不是 object 标签。

示例代码:

<object data="https://theuselessweb.com/"
width="800"
height="800"
type="text/html">
</object>

在 HTML 中使用 embed 标签作为 iframe 的替代品

embed 标签类似于 object 标签,用于相同的目的。我们可以使用 embed 标签在我们的网页中嵌入各种外部资源。我们可以嵌入 PDF、图像、音频、视频和网页等媒体。标签定义了一个容器,我们可以在其中嵌入我们想要的内容。embed 标签是一个自闭合标签。我们可以使用 src 属性来指定要嵌入的网页的 URL。该标签有一个 type 属性来指定要嵌入的内容类型。我们可以类似地定义高度和宽度,与 object 标签相同。

例如,编写 embed 标记并将 type 属性设置为 text/html。接下来,编写 src 属性并将其设置为 https://theuselessweb.com/。然后,将容器的高度和宽度设置为 500800

高度和宽度的测量以像素为单位。通过这种方式,我们可以在 HTML 中使用 embed 标签来替代 iframe 标签。但是,推荐使用 iframe 标签而不是 embed 标签。

示例代码:

<embed type="text/html" src="https://theuselessweb.com/" width="800" height="500">
作者: Subodh Poudel
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn