<iframe>：內聯框架元素

試一試

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik">
</iframe>

iframe {
  border: 1px solid black;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
}

每個嵌入的瀏覽上下文都有自己的文件並允許 URL 導航。每個嵌入式瀏覽上下文的導航都被線性化到最頂層瀏覽上下文的會話歷史記錄中。嵌入其他瀏覽上下文的瀏覽上下文稱為父瀏覽上下文。最頂層瀏覽上下文——沒有父級的瀏覽上下文——通常是瀏覽器視窗，由Window物件表示。

屬性

此元素包含全域性屬性。

allow

為<iframe>指定許可權策略。該策略根據請求的來源定義了<iframe>可用的功能（例如，訪問麥克風、攝像頭、電池、網路共享等）。

有關示例，請參見Permissions-Policy主題中的iframe。

注意：透過allow屬性指定的許可權策略是在Permissions-Policy頭部中指定的策略之上實現的一種進一步的限制。它不會取代它。

allowfullscreen

如果<iframe>可以透過呼叫requestFullscreen()方法啟用全屏模式，則設定為true。

注意：此屬性被認為是遺留屬性，並重新定義為allow="fullscreen"。

allowpaymentrequest 已廢棄 非標準

如果允許跨源<iframe>呼叫Payment Request API，則設定為true。

注意：此屬性被認為是遺留屬性，並重新定義為allow="payment"。

browsingtopics 實驗性 非標準

一個布林屬性，如果存在，則指定當前使用者的選定主題應隨<iframe>源的請求一起傳送。有關更多詳細資訊，請參見使用 Topics API。

credentialless 實驗性

設定為true可使<iframe>無憑證，這意味著其內容將在新的、臨時上下文中載入。它無法訪問與其源關聯的網路、cookie 和儲存資料。它使用一個新上下文，該上下文在頂層文件生命週期內是本地的。作為回報，可以取消Cross-Origin-Embedder-Policy（COEP）嵌入規則，因此設定了 COEP 的文件可以嵌入未設定 COEP 的第三方文件。有關更多詳細資訊，請參見IFrame 無憑證。

csp 實驗性

針對嵌入資源強制執行的內容安全策略。有關詳細資訊，請參閱HTMLIFrameElement.csp。

height

以 CSS 畫素為單位的框架高度。預設為150。

loading

指示瀏覽器何時載入 iframe

eager

在頁面載入時立即載入 iframe（這是預設值）。

lazy

延遲載入 iframe，直到它達到與視覺視口的計算距離（由瀏覽器定義）。目的是避免使用獲取框架所需的網路和儲存頻寬，直到瀏覽器合理地確定需要它為止。這在大多數典型用例中改善了效能和成本，特別是透過減少初始頁面載入時間。

注意：僅當啟用 JavaScript 時才會延遲載入。這是一種反跟蹤措施。

name

嵌入式瀏覽上下文的可定址名稱。這可以在<a>、<form>或<base>元素的target屬性中，<input>或<button>元素的formtarget屬性中，或window.open()方法的windowName引數中使用。此外，該名稱成為Window和Document物件的屬性，其中包含對嵌入式視窗或元素本身的引用。

referrerpolicy

指示在獲取框架資源時要傳送哪個引用者

no-referrer

不會發送Referer頭。

no-referrer-when-downgrade

不會向沒有TLS (HTTPS) 的來源傳送Referer頭。

origin

傳送的引用者將僅限於引用頁面的來源：其方案、主機和埠。

origin-when-cross-origin

傳送給其他源的引用者將僅限於方案、主機和埠。同一源的導航仍將包含路徑。

same-origin

將為同源傳送引用者，但跨源請求將不包含引用者資訊。

strict-origin

當協議安全級別保持不變 (HTTPS→HTTPS) 時，僅將文件的來源作為引用者傳送，但不要將其傳送到安全性較低的目標 (HTTPS→HTTP)。

strict-origin-when-cross-origin (預設)

當執行同源請求時傳送完整 URL，當協議安全級別保持不變 (HTTPS→HTTPS) 時僅傳送來源，並且不向安全性較低的目標 (HTTPS→HTTP) 傳送任何頭。

unsafe-url

引用者將包含來源和路徑（但不包含片段、密碼或使用者名稱）。此值不安全，因為它會將 TLS 保護資源的來源和路徑洩露給不安全的來源。

sandbox

控制應用於嵌入在<iframe>中的內容的限制。屬性的值可以是空以應用所有限制，或以空格分隔的令牌以取消特定限制

allow-downloads

允許透過帶有download屬性的<a>或<area>元素下載檔案，以及透過導致檔案下載的導航。無論使用者是否點選連結，或者JS程式碼在沒有使用者互動的情況下啟動它，這都有效。

allow-forms

允許頁面提交表單。如果未使用此關鍵字，表單將正常顯示，但提交它不會觸發輸入驗證、向 Web 伺服器傳送資料或關閉對話方塊。

allow-modals

允許頁面透過Window.alert()、Window.confirm()、Window.print()和Window.prompt()開啟模態視窗，而無論此關鍵字如何，都允許開啟<dialog>。它還允許頁面接收BeforeUnloadEvent事件。

allow-orientation-lock

讓資源鎖定螢幕方向。

allow-pointer-lock

允許頁面使用指標鎖定 API。

allow-popups

允許彈出視窗（例如，由Window.open()或target="_blank"建立）。如果未使用此關鍵字，此類功能將靜默失敗。

allow-popups-to-escape-sandbox

允許沙盒文件開啟新的瀏覽上下文，而不會強制對其施加沙盒標誌。例如，這將允許第三方廣告安全地沙盒化，而無需對廣告連結到的頁面強制執行相同的限制。如果未包含此標誌，則重定向頁面、彈出視窗或新選項卡將受到與原始<iframe>相同的沙盒限制。

allow-presentation

允許嵌入者控制 iframe 是否可以開始演示會話。

allow-same-origin

如果未使用此令牌，則資源將被視為來自一個特殊來源，該來源始終無法透過同源策略（可能會阻止訪問資料儲存/Cookie和某些 JavaScript API）。

allow-scripts

允許頁面執行指令碼（但不建立彈出視窗）。如果未使用此關鍵字，則不允許此操作。

allow-storage-access-by-user-activation 實驗性

允許載入到<iframe>中的文件使用儲存訪問 API請求訪問未分割槽 cookie。

allow-top-navigation

讓資源導航頂層瀏覽上下文（名為_top的那個）。

allow-top-navigation-by-user-activation

讓資源導航頂層瀏覽上下文，但僅限於使用者手勢發起。

allow-top-navigation-to-custom-protocols

允許導航到內建在瀏覽器中或由網站註冊的非http協議。此功能也由allow-popups或allow-top-navigation關鍵字啟用。

備註

• 當嵌入文件與嵌入頁面同源時，強烈不建議同時使用allow-scripts和allow-same-origin，因為這會使嵌入文件刪除sandbox屬性——使其安全性不比完全不使用sandbox屬性更高。
• 如果攻擊者可以在沙盒iframe外部顯示內容（例如，如果檢視器在新選項卡中開啟框架），沙盒就毫無用處。此類內容也應從單獨的來源提供，以限制潛在的損害。

注意：當用戶從帶有sandbox屬性的<iframe>中的嵌入頁面重定向、開啟彈出視窗或開啟新選項卡時，新的瀏覽上下文受相同的sandbox限制。這可能會導致問題——例如，如果一個沒有設定sandbox="allow-forms"或sandbox="allow-popups-to-escape-sandbox"屬性的<iframe>中嵌入的頁面在新選項卡中開啟一個新網站，則在該新瀏覽上下文中的表單提交將靜默失敗。

src

要嵌入的頁面的 URL。使用about:blank值嵌入符合同源策略的空頁面。另請注意，以程式設計方式刪除<iframe>的 src 屬性（例如，透過Element.removeAttribute()）會導致 Firefox（從版本 65 開始）、基於 Chromium 的瀏覽器和 Safari/iOS 在框架中載入about:blank。

注意：about:blank頁面在解析任何相對 URL（例如錨鏈接）時，使用嵌入文件的 URL 作為其基本 URL。

srcdoc

要嵌入的內聯 HTML，覆蓋src屬性。其內容應遵循完整 HTML 文件的語法，其中包括文件型別宣告、<html>、<body>標籤等，儘管其中大部分可以省略，只留下正文內容。此文件的location將是about:srcdoc。如果瀏覽器不支援srcdoc屬性，它將回退到src屬性中的 URL。

注意：about:srcdoc頁面在解析任何相對 URL（例如錨鏈接）時，使用嵌入文件的 URL 作為其基本 URL。

width

以 CSS 畫素為單位的框架寬度。預設為300。

已棄用屬性

這些屬性已廢棄，可能不再受所有使用者代理支援。您不應在新內容中使用它們，並嘗試從現有內容中刪除它們。

align 已棄用

此元素相對於周圍上下文的對齊方式。

frameborder 已廢棄

值1（預設值）在此框架周圍繪製邊框。值0移除此框架周圍的邊框，但您應該改用 CSS 屬性border來控制<iframe>邊框。

longdesc 已廢棄

框架內容的詳細描述的 URL。由於被廣泛濫用，這對非可視瀏覽器沒有幫助。

marginheight 已廢棄

框架內容與其頂部和底部邊框之間的畫素間距。

marginwidth 已廢棄

框架內容與其左右邊框之間的畫素間距。

scrolling 已廢棄

指示瀏覽器何時為框架提供捲軸

auto

僅當框架內容大於其尺寸時。

是

始終顯示捲軸。

否

從不顯示捲軸。

指令碼

內聯框架，例如<frame>元素，包含在window.frames偽陣列中。

透過 DOM HTMLIFrameElement 物件，指令碼可以透過contentWindow屬性訪問框架資源的window物件。contentDocument屬性引用<iframe>內的document，與contentWindow.document相同。

從框架內部，指令碼可以使用window.parent獲取對其父視窗的引用。

指令碼對框架內容的訪問受同源策略的約束。如果指令碼從不同的來源載入，則指令碼無法訪問其他window物件中的大多數屬性，包括框架內的指令碼訪問框架的父級。可以使用Window.postMessage()實現跨源通訊。

跨源框架中的頂級導航

在同源框架中執行的指令碼可以訪問Window.top屬性，並設定window.top.location以將頂級頁面重定向到新位置。此行為稱為“頂級導航”。

只有當框架具有粘性啟用時，跨源框架才允許使用top重定向頂級頁面。如果頂級導航被阻止，瀏覽器可能會提示使用者允許重定向或在開發者控制檯中報告錯誤（或兩者）。瀏覽器的此限制稱為框架破壞干預。這意味著跨源框架無法立即重定向頂級頁面——使用者必須之前與框架互動或授予重定向許可權。

沙盒框架會阻止所有頂級導航，除非sandbox屬性值設定為allow-top-navigation或allow-top-navigation-by-user-activation。請注意，頂級導航許可權是繼承的，因此巢狀框架只有在其父框架也允許的情況下才能執行頂級導航。

定位和縮放

作為替換元素，<iframe>允許使用object-position屬性調整嵌入文件在其框中的位置。

error 和 load 事件行為

在<iframe>上觸發的error和load事件可用於探測本地網路 HTTP 伺服器的 URL 空間。因此，作為安全預防措施，使用者代理不會在<iframe>上觸發error事件，並且load事件始終被觸發，即使<iframe>內容載入失敗。

無障礙

使用輔助技術（如螢幕閱讀器）瀏覽的使用者可以使用<iframe>上的title屬性來標記其內容。標題的值應簡潔地描述嵌入內容

<iframe
  title="Wikipedia page for Avocados"
  src="https://en.wikipedia.org/wiki/Avocado"></iframe>

如果沒有這個標題，他們就必須進入<iframe>才能確定其嵌入內容是什麼。這種上下文切換可能會令人困惑且耗時，特別是對於包含多個<iframe>和/或嵌入內容包含影片或音訊等互動式內容的頁面。

示例

一個基本的 <iframe>

此示例在 iframe 中嵌入了https://example.org的頁面。這是 iframe 的常見用例：嵌入來自其他網站的內容。例如，即時示例本身以及頂部的嘗試一下示例都是來自另一個 MDN 網站的<iframe>嵌入內容。

HTML

<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

結果

在 <iframe> 中嵌入原始碼

此示例直接在 iframe 中渲染原始碼。當顯示使用者生成的內容時，結合sandbox屬性，這可以用作防止指令碼注入的技術。

請注意，當使用srcdoc時，嵌入內容中的任何相對 URL 都將相對於嵌入頁面的 URL 進行解析。如果您想使用指向嵌入內容中位置的錨鏈接，則需要明確指定about:srcdoc作為基本 URL。

HTML

<article>
  <footer>Nine minutes ago, <i>jc</i> wrote:</footer>
  <iframe
    sandbox
    srcdoc="<p>There are two ways to use the <code>iframe</code> element:</p>
<ol>
<li><a href=&quot;about:srcdoc#embed_another&quot;>To embed content from another page</a></li>
<li><a href=&quot;about:srcdoc#embed_user&quot;>To embed user-generated content</a></li>
</ol>
<h2 id=&quot;embed_another&quot;>Embedding content from another page</h2>
<p>Use the <code>src</code> attribute to specify the URL of the page to embed:</p>
<pre><code>&amp;lt;iframe src=&quot;https://example.org&quot;&amp;gt;&amp;lt;/iframe&amp;gt;</code></pre>
<h2 id=&quot;embed_user&quot;>Embedding user-generated content</h2>
<p>Use the <code>srcdoc</code> attribute to specify the content to embed. This post is already an example!</p>
"
    width="500"
    height="250"
></iframe>
</article>

以下是使用srcdoc時如何編寫轉義序列

• 首先，編寫 HTML，轉義任何您將在普通 HTML 文件中轉義的內容（例如<、>、&等）。
• < 和 < 在 srcdoc 屬性中表示完全相同的字元。因此，要使其在 HTML 文件中成為實際的轉義序列，請將所有和號（&）替換為 &。例如，< 變為 <，& 變為 &。
• 將所有雙引號 (") 替換為"，以防止srcdoc屬性過早終止（如果您使用'，則應將'替換為'）。此步驟發生在上一​​步之後，因此在此步驟中生成的"不會變成"。

結果

技術摘要

規範

瀏覽器相容性

另見

• CSP: frame-ancestors
• 隱私、許可權和資訊安全