<fencedframe>：围栏框架元素

属性

元素包含全局属性。

allow

为 <fencedframe> 指定权限策略，该策略根据请求的来源定义 <fencedframe> 可用的特性。请参见围栏框架可用的权限策略了解在围栏框架上设置的策略来控制哪些特性的详细信息。

height

以 CSS 像素为单位表示围栏框架高度的无单位的整数。默认值为 150。

width

以 CSS 像素为单位表示围栏框架宽度的无单位的整数。默认值为 300。

围栏框架可用的权限策略

从顶层上下文委托给围栏框架的权限，用于允许或拒绝可能会被用作通信渠道的特性，从而构成隐私威胁。因此，那些可通过权限策略（例如，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 属性来控制哪些特性被启用。以这种方式阻止隐私沙箱特性，也将阻止围栏框架的加载——即完全不存在通信渠道。

围栏框架边界间的切换焦点

文档的激活焦点跨围栏框架边界移动的能力（即从围栏框架外的元素移动到围栏框架内的元素，反之亦然）是受限的。用户发起的操作，如点击或按 Tab 键，可以实现这种移动，因为这种情况下不存在指纹追踪的风险。

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

定位和缩放

作为可替换元素，<fencedframe> 允许使用 object-position 属性调整嵌入文档在其框内的位置。

<fencedframe> 的 config 对象的内部 contentWidth 和 contentHeight 属性可用于设置嵌入内容的尺寸。在这种情况下，更改 <fencedframe> 的 width 或 height 将改变页面上嵌入容器的尺寸，但容器内的文档会按比例缩放以适应新的尺寸。嵌入文档的报告宽度和高度（即 Window.innerWidth 和 Window.innerHeight）将保持不变。

无障碍

使用辅助技术（如，屏幕阅读器）导航的用户可以使用 <fencedframe> 上的 title 属性为其内容添加标签。标题的值应简洁地描述嵌入的内容：

<fencedframe
  title="新的 Log 广告。来自 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({
  // 拍卖配置
  resolveToConfig: true,
});

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

技术概要

规范

浏览器兼容性

参见

• 围栏框架 API
• developers.google.cn 上的围栏框架
• developers.google.cn 上的隐私沙盒