Kommunikation mit eingebetteten Frames
Dieser Artikel liefert Informationen darüber, wie die Kommunikation zwischen einem Einbettungselement und eingebettetem Inhalt in verschiedenen Frametypen (d.h. einem <iframe>
und einem <fencedframe>
) variiert und wie die übergebenen Daten gespeichert werden können.
Anleitung zur Kommunikation zwischen dem Einbettungselement und einem <iframe>
Wenn der Drittanbieter-Code in einem <iframe>
eingebettet ist, können das <iframe>
und das Einbettungselement frei Nachrichten austauschen, um zu verlangen, dass Daten in ihren clientseitigen geteilten Speicher geschrieben werden. Das Einbettungselement kann eine Anfrage an dieses <iframe>
senden, um Daten in seinen eigenen Drittanbieterspeicher zu schreiben, mit einem dokumentübergreifenden Kommunikationskanal unter Verwendung von Window.postMessage()
. Der Drittanbieter kann auch postMessage()
-Anfragen an das Einbettungselement senden.
Vom <iframe>
aus können Sie auf ein message
Ereignis lauschen, das vom Einbettungselement kommt. Wenn das Einbettungselement eine Nachricht an das <iframe>
mit postMessage()
schickt, kann das <iframe>
diese Daten aufnehmen und in seinem eigenen clientseitigen geteilten Speicher speichern. Umgekehrt kann das <iframe>
eine Nachricht senden, auf die das Einbettungselement hören und antworten kann, indem es Daten in seinen geteilten Speicher schreibt.
Anleitung zur Kommunikation zwischen dem Einbettungselement und einem <fencedframe>
Fenced Frames sind für Anwendungsfälle gedacht wie die Anzeige von gezielten Anzeigen, die über die Protected Audience API und WindowSharedStorage.selectURL()
ausgewählt werden. Die Kommunikation zwischen <fencedframe>
und anderen Seiten außerhalb des <fencedframe>
auf der Seite ist absichtlich eingeschränkt, aber eine Kommunikationsmethode zwischen Einbettungselement und geteilten Speicher-Worklets existiert — FencedFrameConfig.setSharedStorageContext()
.
Hinweis: Innerhalb desselben <fencedframe>
-Baumes ist die Kommunikation zwischen Frames erlaubt. Zum Beispiel kann ein Wurzel-<fencedframe>
eine Nachricht an ein Kind-<iframe>
in seinem eigenen Baum senden, und ein Kind-<iframe>
kann eine Nachricht an das Eltern-<fencedframe>
senden.
Schauen wir uns ein komplexeres Beispiel an, das eine Select-URL-Ausgabeoperation verwendet, um eine Anzeige in einem <fencedframe>
darzustellen.
In diesem Beispiel bittet ein Herausgeber einen Drittanbieter-Inhaltsanbieter, Inhalte auf der Seite darzustellen. Der mit WindowSharedStorage.selectURL()
ausgewählte Inhalt wird in einem <fencedframe>
dargestellt und der Inhalt enthält ein <iframe>
von einem Messdienstanbieter. Beachten Sie, dass ein Herausgeber jede Entität darstellen kann, die ein Drittanbieter-<fencedframe>
einbettet. Ein Messdienstanbieter stellt ebenfalls jeden verschachtelten Drittanbieter-Code dar, der in einem <fencedframe>
eines anderen Drittanbieters ausgeführt wird.
Um Daten in ein <fencedframe>
zu übergeben, die in einem geteilten Speicher-Worklet verwendet werden sollen, kann das Einbettungselement die Daten in einem FencedFrameConfig
setzen. Dieser Wert wird als WorkletSharedStorage.context
innerhalb des geteilten Speicher-Worklets verfügbar sein. Diese Daten sind außerhalb eines Worklets nicht verfügbar und können nur innerhalb einer sicheren und privaten Umgebung abgerufen werden, die ein geteiltes Speicher-Worklet bietet.
Wenn ein selectURL()
-Aufruf ein FencedFrameConfig
zurückgibt, kann das Frame-Einbettungselement Daten übergeben, indem es setSharedStorageContext(data)
ruft:
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)
muss auf dem fencedFrameConfig
aufgerufen werden, bevor das vorgesehene <fencedframe>
-Element den config
-Attributwert auf fencedFrameConfig
setzt, da dies die Navigation des Frames auslöst.
Innerhalb eines geteilten Speicher-Worklets kann dann auf WorkletSharedStorage.context
zugegriffen werden, um die Daten abzurufen:
class ReportingOperation {
async run() {
sharedStorage.set("some-data-from-embedder", sharedStorage.context);
}
}
register("send-report", ReportingOperation);