<fencedframe>：Fenced Frame 元素

屬性

此元素包含全域性屬性。

allow 實驗性

為 <fencedframe> 指定一個許可權策略，該策略根據請求的來源定義 <fencedframe> 可用的功能。有關哪些功能可以透過在 fenced frame 上設定的策略進行控制的更多詳細資訊，請參閱Fenced Frame 可用的許可權策略。

height 實驗性

一個無單位的整數，表示 fenced frame 的高度（以 CSS 畫素為單位）。預設值為 150。

width 實驗性

一個無單位的整數，表示 fenced frame 的寬度（以 CSS 畫素為單位）。預設值為 300。

Fenced Frame 可用的許可權策略

從頂層上下文委託給 fenced frame 以允許和拒絕功能的許可權可以用作通訊通道，因此構成隱私威脅。因此，可以透過許可權策略（例如，camera 或geolocation）控制可用性的標準 Web 功能在 fenced frame 內不可用。

在 fenced frame 內唯一可以透過策略啟用的功能是專門設計用於 fenced frame 的特定功能

• Protected Audience API
  • 歸因報告
  • 私有聚合
  • 共享儲存
  • 共享儲存選擇 URL
• 共享儲存 API
  • 歸因報告
  • 私有聚合
  • 共享儲存
  • 共享儲存選擇 URL

目前這些功能在 fenced frame 內始終啟用。將來，哪些功能被啟用將透過 <fencedframe> 的 allow 屬性進行控制。以這種方式阻止隱私沙盒功能也將阻止 fenced frame 的載入——屆時將完全沒有通訊通道。

跨 Fenced Frame 邊界聚焦

文件活動焦點跨越 fenced frame 邊界（即，從 fenced frame 外部的元素移動到內部元素，反之亦然）的能力是有限的。使用者發起的操作（例如點選或 Tab 鍵）可以做到這一點，因為沒有指紋識別風險。

然而，嘗試透過 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（例如 Protected Audience 或 Shared Storage）會生成一個 FencedFrameConfig 物件，然後將其設定為 <fencedframe> 的 config 屬性的值。

以下示例從 Protected Audience API 的廣告競價中獲取一個 FencedFrameConfig，然後用於在 <fencedframe> 中顯示中標廣告

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

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

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

技術摘要

規範

瀏覽器相容性

另見

• Fenced Frame API
• privacysandbox.google.com 上的Fenced frames
• 隱私沙盒（位於 privacysandbox.google.com）