嵌入式框架通信

如何实现嵌入器与 <iframe> 之间的通信

当第三方代码嵌入在 <iframe> 中时，<iframe> 和嵌入器可以自由地相互发送消息，以请求将数据写入它们客户端的 共享存储。嵌入器可以使用跨文档通信通道，通过 Window.postMessage() 向 <iframe> 发送请求，要求其将数据写入自身的第三方存储。第三方也可以向嵌入器发送 postMessage() 请求。

从 <iframe> 中，您可以监听来自嵌入器的 message 事件。当嵌入器使用 postMessage() 向 <iframe> 分派消息时，<iframe> 可以获取该数据并将其存储在自身的客户端共享存储中。反之，<iframe> 也可以分派一个嵌入器可以监听的消息，并通过将数据写入其共享存储来响应。

如何实现嵌入器与 <fencedframe> 之间的通信

<fencedframe> 用于显示通过 Protected Audience API 和 WindowSharedStorage.selectURL() 选择的定向广告等场景。<fencedframe> 与页面上 <fencedframe> 之外的其他页面之间的通信被有意限制，但嵌入器和共享存储工作线程之间确实存在一种通信方式 — FencedFrameConfig.setSharedStorageContext()。

让我们看一个更复杂的例子，该例子使用 Select URL 输出门操作在 <fencedframe> 中渲染广告。

在此示例中，发布者要求第三方内容提供商在页面上渲染一些内容。使用 WindowSharedStorage.selectURL() 选择的内容将在 <fencedframe> 中渲染，该内容包含来自测量提供商的 <iframe>。请注意，发布者可以代表任何嵌入第三方 <fencedframe> 的实体。此外，测量提供商代表在不同第三方 <fencedframe> 中运行的任何嵌套第三方代码。

要将数据传递到 <fencedframe> 以便在共享存储工作线程中使用，嵌入器可以在 FencedFrameConfig 中设置数据。该值将在共享存储工作线程内的 WorkletSharedStorage.context 中可用。这些数据在工作线程之外不可用，并且只能在共享存储工作线程提供的安全私有环境中访问。

当 selectURL() 调用返回 FencedFrameConfig 时，框架嵌入器可以通过调用 setSharedStorageContext(data) 来传入数据。

const fencedFrameConfig = await window.sharedStorage.selectURL(
  "creative-rotation",
  urls,
  {
    // …
    resolveToConfig: true,
  },
);

fencedFrameConfig.setSharedStorageContext("some-data");

// Navigate the fenced frame to the config.
document.getElementById("my-fenced-frame").config = fencedFrameConfig;

setSharedStorageContext(data) 必须在预期的 <fencedframe> 元素接收者将其 config 属性设置为 fencedFrameConfig 之前调用，因为这会触发框架导航。

在共享存储工作线程内部，可以访问 WorkletSharedStorage.context 来检索数据。

class ReportingOperation {
  async run() {
    sharedStorage.set("some-data-from-embedder", sharedStorage.context);
  }
}
register("send-report", ReportingOperation);