HTML <iframe> 標簽

定義和用法

<iframe> 標簽定義行內框架（內聯框架）。

行內框架用于在當前 HTML 文檔中嵌入另一個文檔。

提示：請使用 CSS 來設置 <iframe> 的樣式（請參見下面的例子）。

提示：最好始終為 <iframe> 包含 title 屬性。屏幕閱讀器可使用此屬性來讀取關于 <iframe> 內容的描述。

另請參閱：

HTML 教程：HTML Iframe

HTML DOM 參考手冊：IFrame 對象

實例

例子 1

行內框架標記如下：

<iframe src="https://www.codew3c.com" title="CodeW3C.com 在線教程"></iframe>

親自試一試

例子 2

添加并刪除 iframe 的邊框（使用 CSS）：

<iframe src="/index.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/index.asp" width="100%" height="300" style="border:none;">
</iframe>

親自試一試

屬性

屬性 值 描述
allow 規定 <iframe> 的功能策略。
allowfullscreen
  • true
  • false
 如果 <iframe> 可以通過調用 requestFullscreen() 方法激活全屏模式，則設置為 true。
allowpaymentrequest
  • true
  • false
 如果允許跨源 <iframe> 調用 Payment Request API，則設置為 true。
height 像素 規定 <iframe> 的高度。默認高度為 150 像素。
loading
  • eager
  • lazy
 規定瀏覽器是應立即加載 iframe 還是推遲加載 iframe，直到滿足某些條件為止。
name 文本 規定 <iframe> 的名稱。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 規定在獲取 iframe 時要發送的引用信息。
sandbox
  • allow-forms
  • allow-pointer-lock
  • allow-popups
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
 啟用一系列對 <iframe> 中內容的額外限制。
src URL 規定要嵌入到 <iframe> 中的文檔的地址。
srcdoc HTML 代碼 規定要在 <iframe> 中顯示的頁面的 HTML 內容。
width 像素 規定 <iframe> 的寬度。默認寬度為 300 像素。

全局屬性

<iframe> 標簽還支持 HTML 中的全局屬性。

事件屬性

<iframe> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <iframe> 元素：

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

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持