HTML 內置頁框 iframe：嵌入網頁、影片與地圖

在網頁中嵌入另外一個 HTML 網頁，常用來放 YouTube 影片、Google 地圖與第三方元件。除了 src 與寬高，title 關係到無障礙，loading 與 sandbox 則牽涉載入效能與安全性。

<iframe
  src="https://docs.incode.tw"
  frameborder="0"
  width="500"
  height="500"
></iframe>

最常見的用途是嵌入 YouTube 影片、Google 地圖，或第三方的表單與金流元件。

src

指定要被嵌入的網站的網址。

width

內置頁框的寬度。

height

內置頁框的高度。

frameborder

內置頁框的邊框。

小提醒

frameborder 在 HTML5 已被淘汰，改用 CSS 的 border: 0 即可。

title

描述這個頁框裡是什麼內容，螢幕閱讀器會直接念出來：

<iframe src="https://www.youtube.com/embed/xxxx" title="Vue 3 入門教學影片"></iframe>

沒有 title 時，使用輔助工具的人只會聽到一個沒有說明的頁框，這也是無障礙檢測中常見的扣分項。

loading

與 圖片 一樣，非首屏的嵌入內容建議延後載入：

<iframe src="..." loading="lazy" title="..."></iframe>

每個 iframe 都是一份完整的文件，要各自下載與渲染，數量一多對效能的影響相當明顯。

sandbox 與 allow

嵌入不完全信任的內容時，sandbox 可以限制它能做的事，allow 則用來開放特定功能：

<!-- 只允許執行腳本，其餘一律限制 -->
<iframe src="..." sandbox="allow-scripts" title="..."></iframe>

<!-- 允許全螢幕播放 -->
<iframe src="..." allow="fullscreen" title="..."></iframe>

為什麼有些網站嵌不進來

不少網站會在伺服器設定禁止被嵌入的標頭，用來防止點擊劫持。這是對方的安全設定，前端沒有辦法繞過，只能改用它官方提供的嵌入網址或 API。

常見問題

為什麼有些網站無法被 iframe 嵌入？

因為對方在伺服器設定了禁止被嵌入的標頭，用來防止點擊劫持。這是對方的安全設定，前端無法繞過，只能改用官方提供的嵌入網址或 API。

iframe 會影響網頁效能嗎？

會。每個 iframe 都是一份完整的文件，要各自下載與渲染。非首屏的嵌入內容建議加上 loading="lazy"，讓它捲到附近才載入。

iframe 需要加 title 嗎？

需要。螢幕閱讀器會把 title 念出來，讓使用者知道這個框裡是什麼內容。沒有 title 時只會聽到一個沒有說明的頁框，這也是無障礙檢測常見的扣分項。

frameborder 還要寫嗎？

它在 HTML5 已經被淘汰，改用 CSS 的 border: 0 即可。舊教學裡常見這個屬性，寫了雖然還能運作，但不是現在的建議做法。

延伸閱讀

影像 <img>超連結 <a>區塊容器 <div>