嵌入框架的通信

本文介绍了嵌入器与嵌入在不同类型框架（即 <iframe> 和 <fencedframe>）中的内容之间的通信差异，以及如何存储传递的数据。

如何在嵌入器和<iframe>之间进行通信

Diagram illustrating the difference between local storage and shared storage and communication with an iframe, as explained below

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

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

如何在嵌入器和<fencedframe>之间进行通信

受限框架旨在用于某些用例，例如显示通过 受保护受众 API 和 WindowSharedStorage.selectURL() 选择的目标广告。<fencedframe> 与页面上<fencedframe>外部的其他页面之间的通信有意受到限制，但嵌入器与共享存储工作线程之间确实存在一种通信方法—— FencedFrameConfig.setSharedStorageContext()。

注意：在同一个<fencedframe>树中，允许框架之间进行通信。例如，根<fencedframe>可以向其自身树中的子<iframe>发送消息，子<iframe>可以向父<fencedframe>发送消息。

让我们来看一个更复杂的示例，该示例使用选择 URL 输出网关操作在<fencedframe>中呈现广告。

A complex embedding situation with an embedder that is embedding an iframe, which is embedding a fencedframe, which is embedding an iframe

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

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

A publisher created a fencedframeconfig using selectURL, which can set contextual data using setSharedStorageContext that will then be available in a shared storage worklet

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

js
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;

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

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

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