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