FencedFrameConfig

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

FencedFrameConfig 接口表示 <fencedframe> 的导航，即将在其中显示的内容。

FencedFrameConfig 对象无法通过 JavaScript 手动构造。它们是从 Protected Audience API 等源返回的，并设置为 HTMLFencedFrameElement.config 的值。

FencedFrameConfig 对象实例有一个公开的方法，但它也映射到包含无法从 JavaScript 访问的不透明属性的内部配置信息。这包括加载内容源和用于广告目的的兴趣组等信息。这是 fenced frames 如何在尊重用户隐私的同时帮助实现关键用例的关键。

实例方法

setSharedStorageContext() 实验性: 将嵌入文档中的数据传递到 <fencedframe> 的共享存储中。

示例

基本用法

要设置 <fencedframe> 中显示的内容，一个利用的 API（例如 Protected Audience 或 Shared Storage）会生成一个 FencedFrameConfig 对象，然后将其设置为 <fencedframe> 的 config 属性的值。

以下示例从 Protected Audience API 的广告竞价中获取一个 FencedFrameConfig，然后用于在 <fencedframe> 中显示中标广告

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

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

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

通过 `setSharedStorageContext()` 传递上下文数据

您可以使用 Private Aggregation API 来创建报告，这些报告将隐私沙盒（fenced frame）内的事件级数据与嵌入文档的上下文数据相结合。setSharedStorageContext() 可用于将来自嵌入程序的上下文数据传递给由 Protected Audience API 启动的共享存储工作组。

在以下示例中，我们将来自嵌入页面和 fenced frame 的数据存储在共享存储中。

在嵌入页面中，我们将使用 setSharedStorageContext() 将模拟的事件 ID 设置为共享存储上下文。

const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });

// Data from the embedder that you want to pass to the shared storage worklet
frameConfig.setSharedStorageContext("some-event-id");

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

在 fenced frame 内部，我们使用 window.sharedStorage.worklet.addModule() 添加 worklet 模块，然后使用 window.sharedStorage.run() 将事件级别数据发送到共享存储 worklet（这与来自嵌入文档的上下文数据无关）。

const frameData = {
  // Data available only inside the fenced frame
};

await window.sharedStorage.worklet.addModule("reporting-worklet.js");

await window.sharedStorage.run("send-report", {
  data: {
    frameData,
  },
});

在 reporting-worklet.js worklet 中，我们从 sharedStorage.context 读取嵌入文档的事件 ID，并从数据对象中读取 frame 的事件级别数据，然后通过 Private Aggregation 进行报告。

class ReportingOperation {
  convertEventIdToBucket(eventId) {
    // …
  }
  convertEventPayloadToValue(info) {
    // …
  }

  async run(data) {
    // Data from the embedder
    const eventId = sharedStorage.context;

    // Data from the fenced frame
    const eventPayload = data.frameData;

    privateAggregation.sendHistogramReport({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload),
    });
  }
}

register("send-report", ReportingOperation);