<fencedframe>：围栏框架元素

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

allow

为 <fencedframe> 指定 权限策略，它根据请求的来源定义 <fencedframe> 可以使用哪些功能。请参阅 可用于受隔离框架的权限策略，了解有关可通过受隔离框架上设置的策略来控制哪些功能的更多详细信息。

height

一个无单位整数，表示栅栏框架的高度（以 CSS 像素为单位）。默认为 150。

width

一个无单位整数，表示栅栏框架的宽度（以 CSS 像素为单位）。默认为 300。

¥Permissions policies available to fenced frames

从顶层上下文委托给围栏框架以允许和拒绝功能的权限可以用作通信渠道，因此构成隐私威胁。因此，可通过 权限策略（例如 camera 或 geolocation）控制其可用性的标准 Web 功能在受防护的框架内不可用。

¥Permissions delegated from the top-level context to a fenced frame for allowing and denying features could be used as a communication channel, so constitute a privacy threat. As a result, standard web features that can have their availability controlled via Permissions Policy (for example, camera or geolocation) are not available within fenced frames.

受隔离框架内的策略可以启用的唯一功能是设计用于受隔离框架内的特定功能：

¥The only features that can be enabled by a policy inside fenced frames are the specific features designed to be used inside fenced frames:

• 受保护的受众 API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url
• 共享存储 API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url

目前，这些始终在围栏框架内启用。将来，启用哪些功能将可以使用 <fencedframe> allow 属性进行控制。以这种方式阻止隐私沙箱功能也会阻止加载围栏框架 - 根本没有通信通道。

¥Currently these are always enabled inside fenced frames. In the future, which ones are enabled will be controllable using the <fencedframe> allow attribute. Blocking privacy sandbox features in this manner will also block the fenced frame from loading — there will be no communication channel at all.

¥Focusing across fenced frame boundaries

文档的活动焦点跨围栏框架边界移动的能力（即从围栏框架外部的元素到内部的元素，或反之亦然）是有限的。用户发起的操作（例如单击或选项卡）可以执行此操作，因为那里不存在指纹识别风险。

¥The ability of the document's active focus to be moved across fenced frame boundaries (i.e. from an element outside the fenced frame to one inside, or vice versa) is limited. User-initiated actions such as a click or a tab can do so, as there is no fingerprinting risk there.

然而，尝试通过 API 调用（例如 HTMLElement.focus()）穿越边界是被禁止的 - 恶意脚本可能会使用一系列此类调用来跨边界泄露推断信息。

¥However, trying to traverse the boundary via an API call such as HTMLElement.focus() is prohibited — a malicious script could use a series of such calls to leak inferred information across the boundary.

¥Positioning and scaling

作为 被替换的元素，可以使用 object-position 和 object-fit 属性调整 <iframe> 元素框中嵌入文档的位置、对齐方式和缩放比例。

¥As a replaced element, the position, alignment, and scaling of the embedded document within the <iframe> element's box, can be adjusted with the object-position and object-fit properties.

嵌入内容的大小可以通过 <fencedframe> 的 config 对象的内部 contentWidth 和 contentHeight 属性来设置。在这种情况下，更改 <fencedframe> 的 width 或 height 将更改页面上嵌入容器的大小，但容器内的文档将在视觉上缩放以适应。嵌入文档的报告宽度和高度（即 Window.innerWidth 和 Window.innerHeight）将保持不变。

¥The size of the embedded content may be set by internal contentWidth and contentHeight properties of the <fencedframe>'s config object. In such cases, changing the width or height of the <fencedframe> will change the size of the embedded container on the page, but the document inside the container will be visually scaled to fit. The reported width and height of the embedded document (i.e. Window.innerWidth and Window.innerHeight) will be unchanged.

¥Examples

为了设置 <fencedframe> 中显示的内容，使用 API（例如 受保护的观众 或 共享存储）生成 FencedFrameConfig 对象，然后将其设置为 <fencedframe> 的 config 属性的值。

¥To set what content will be shown in a <fencedframe>, a utilizing API (such as Protected Audience or Shared Storage) generates a FencedFrameConfig object, which is then set as the value of the <fencedframe>'s config property.

以下示例从受保护受众 API 的广告拍卖中获取 FencedFrameConfig，然后用于在 <fencedframe> 中显示获胜广告：

¥The following example gets a FencedFrameConfig from a Protected Audience API's ad auction, which is then used to display the winning ad in a <fencedframe>:

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

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

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

注意：必须将 resolveToConfig: true 传递给 runAdAuction() 调用才能获取 FencedFrameConfig 对象。如果未设置，则生成的 Promise 将解析为只能在 <iframe> 中使用的 URN。

¥Note: resolveToConfig: true must be passed in to the runAdAuction() call to obtain a FencedFrameConfig object. If it is not set, the resulting Promise will resolve to a URN that can only be used in an <iframe>.

¥Accessibility concerns

使用屏幕阅读器等辅助技术进行导航的用户可以使用 <fencedframe> 上的 title 属性 来标记其内容。标题的值应该简洁地描述嵌入的内容：

¥People navigating with assistive technology such as a screen reader can use the title attribute on an <fencedframe> to label its content. The title's value should concisely describe the embedded content:

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

如果没有此标题，他们必须导航到 <iframe> 以确定其嵌入内容是什么。这种上下文转换可能会令人困惑且耗时，特别是对于具有多个 <iframe> 的页面和/或如果嵌入包含视频或音频等交互式内容。

¥Without this title, they have to navigate into the <iframe> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple <iframe>s and/or if embeds contain interactive content like video or audio.

¥Technical summary

¥See also

• 围栏框架 API
• developer.chrome.com 上的 围栏框架
• developer.chrome.com 上的 隐私沙箱