HTML 中 iframe 的替代方案

Subodh Poudel 2023年2月19日 2022年1月2日
  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 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