HTML 中 iframe 的替代方案
在 HTML 中,我们使用 iframe 来指定一个内联框架,通过它我们可以将网页嵌入到网页中。在本教程中,我们将介绍一些其他替代 Iframe 来显示网页的方法。
在 HTML 中使用 object
标签作为 iframe 的替代品
我们可以使用 HTML 中的 object
标签在网页中嵌入外部资源。我们可以使用标签在我们的网页中显示另一个网页。object
标签是 HTML 中 iframe
标签的替代品。我们可以使用标签来嵌入不同的多媒体组件,如图像、视频、音频等。object
标签有一个属性 data
,我们可以在其中定义要嵌入的网页的 URL。我们甚至可以使用 width
和 height
属性设置容器的宽度和高度。
例如,编写 object
标签并在 data
属性中设置 URL https://theuselessweb.com/
。然后,将 object
标签的 width
和 height
属性设置为 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/
。然后,将容器的高度和宽度设置为 500
和 800
。
高度和宽度的测量以像素为单位。通过这种方式,我们可以在 HTML 中使用 embed
标签来替代 iframe
标签。但是,推荐使用 iframe
标签而不是 embed
标签。
示例代码:
<embed type="text/html" src="https://theuselessweb.com/" width="800" height="500">
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