<fencedframe>：圍欄頁框元素

屬性

該元素包括全域屬性。

allow

為 <fencedframe> 指定一個權限策略，該策略基於請求的原始位置定義了哪些功能對 <fencedframe> 可用。有關可以通過設置在圍欄頁框上的策略來控制哪些功能的更多詳細信息，請參見可用於圍欄頁框權限策略。

height

一個無單位的整數，表示圍欄頁框的高度，以 CSS 像素為單位。默認值為 150。

width

一個無單位的整數，表示圍欄頁框的寬度，以 CSS 像素為單位。默認值為 300。

可用於圍欄頁框權限策略

從頂層上下文委派給圍欄頁框的允許和拒絕功能的權限策略可以用作通信通道，因此構成一種隱私威脅。因此，標準 Web 功能可以通過權限策略（例如 camera 或 geolocation）控制其可用性的不可用在圍欄頁框內。

可以通過策略在圍欄頁框內啟用的唯一功能是專為在圍欄頁框內使用而設計的特定功能：

• 受保護的受眾 API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url
• 共享存儲 API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url

目前，在圍欄頁框內始終啟用這些功能。將來，哪些功能被啟用將可以使用 <fencedframe> 的 allow 屬性來控制。通過這種方式阻止隱私沙箱功能還將阻止圍欄頁框加載——完全沒有通信通道。

跨越圍欄頁框邊界進行對焦

將文件的活動焦點從圍欄頁框邊界（即從框框外的元素到內部元素，或反之）移動的能力受到限制。用戶啟動的操作，如單擊或切換，可以這樣做，因為那裡沒有指紋識別風險。

然而，試圖通過 API 調用（例如 HTMLElement.focus()）是被禁止的——惡意腳本可以使用一系列這樣的調用來跨越邊界洩露推斷的信息。

定位和縮放

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

嵌入內容的大小可以由 <fencedframe> 的 config 物件的內部 contentWidth 和 contentHeight 屬性設置。在這種情況下，改變 <fencedframe> 的 width 或 height 將改變頁面上嵌入容器的大小，但容器內部的文件將被視覺縮放以適應。嵌入文件的報告寬度和高度（即 Window.innerWidth 和 Window.innerHeight）將保持不變。

無障礙

使用輔助技術，如螢幕閱讀器的人，可以使用 <fencedframe> 的 title 屬性來標記其內容。標題的值應該簡要描述嵌入的內容：

<fencedframe
  title="Advertisement for new Log. From Blammo!"
  width="640"
  height="320"></fencedframe>

如果沒有此標題，他們必須進入 <fencedframe> 才能確定其嵌入的內容。這種上下文轉換可能會令人困惑和耗時，特別是對於包含多個 <fencedframe> 的頁面和／或嵌入包含互動內容（如視訊或音訊）的情況。

範例

要設置 <fencedframe> 中顯示的內容，需要使用 API（例如受保護的受眾或共享存儲）生成一個 FencedFrameConfig 物件，然後將其設置為 <fencedframe> 的 config 屬性的值。

以下範例從受保護的受眾 API 的廣告拍賣中獲取了一個 FencedFrameConfig，然後將其用於在 <fencedframe> 中顯示獲勝的廣告：

<fencedframe width="640" height="320"></fencedframe>

const frameConfig = await navigator.runAdAuction({
  // ……auction 配置
  resolveToConfig: true,
});

const frame = document.querySelector("fencedframe");
frame.config = frameConfig;

技術摘要

規範

瀏覽器相容性

參見

• 圍欄頁框 API
• 在 privacysandbox.google.com 上的圍欄頁框
• 在 privacysandbox.google.com 上的隱私沙箱