<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）