嵌入式框架通訊

如何實現嵌入器與 <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);