<iframe> 是 HTML 的內嵌頁框元素，可以在一個網頁中內嵌另外一個網頁，像是在網頁裡放入 Youtube 影片、Facebook 貼文區塊或廣告，通常都是使用 <iframe> 實現，這篇教學會介紹 <iframe> 內嵌頁框元素的用法。

原文參考：內嵌頁框 iframe

認識 <iframe>

<iframe> 是 HTML 的內嵌頁框元素，只要指定 src 屬性的網址內容，就能在一個網頁中內嵌另外一個網頁，例如網頁裡的 Youtube 影片、Facebook 貼文區塊或廣告，通常都是使用 <iframe> 的技術。

• <iframe> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，內容元素會在網頁無法顯示時才會出現。
• <iframe> 的顯示類型為「inline-block 區塊元素」，預設不會自動換行。
• <iframe> 不可以是 <a> 或 <button> 的子元素。

例如下方的 HTML 開啟後，會使用 <iframe> 內嵌特定網頁。

<iframe src="https://www.oxxostudio.tw" frameborder="1" width="400" height="300">
  看不到頁面時才會顯示這行文字
</iframe>

<iframe> 支援屬性

<iframe> 除了支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，也會使用下方的專門屬性：

關於 sandbox 屬性，在沒有設定的狀態下，針對嵌入的網頁會有一些限制，如果需要開啟這些限制，可以使用下列對應的屬性值，可以放入「多個值」，每個值採用「空白」分格，各個屬性值的說明如下：

例如下方的例子，嵌入的網頁可以使用表單、JavaScript、彈出視窗...等功能。

<iframe src="https://www.oxxostudio.tw"
        frameborder="0"
        width="400"
        height="300"
        sandbox="allow-modals allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts">
  看不到頁面時才會顯示這行文字
</iframe>

<iframe> 預設樣式

下方是 <iframe> 的預設樣式：

iframe:focus {
  outline: none;
}
iframe[seamless] {
  display: block;
}

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• Midjourney 教學
• HTML 教學