Lösen Sie das Problem der domänenübergreifenden Kommunikation zwischen iFrames verschiedener Serviceseiten

Im Entwicklungsprozess kommt es häufig vor, dass Seiten verschiedener Projekte verschachtelt werden, was ein wenig der frühen Micro-Frontend-Entwicklung ähnelt, wobei am häufigsten iFrame verwendet wird, um mit solchen Anforderungen umzugehen, was zwangsläufig auf einige The stößt Kommunikationsproblem zwischen Iframes, wenn der eingebettete Iframe nicht domänenübergreifend ist, ist die Kommunikation zwischen ihnen sehr einfach, aber wenn es domänenübergreifend ist, meldet der Browser ein domänenübergreifendes Problem bei der Kommunikation zwischen Iframes, zu diesem Zeitpunkt Sie benötigen um die in HTML5 enthaltene Postmessage-Methode zu verwenden

Nachricht senden

otherWindow.postMessage(message, targetOrigin, [transfer]);

• anderes Fenster

Ein Verweis auf ein anderes Fenster, z. B. die contentWindow-Eigenschaft eines iframe, ein Fensterobjekt, das durch Ausführen von window.open zurückgegeben wird, oder benannte oder numerisch indizierte window.frames.

• Nachricht
  Die Daten, die an andere Fenster gesendet werden sollen. Es wird durch den strukturierten Klonierungsalgorithmus serialisiert. Das bedeutet, dass Sie Datenobjekte ohne Einschränkungen sicher in das Zielfenster übertragen können, ohne sie selbst zu serialisieren. [1]
• targetOrigin
  gibt an, welche Fenster Nachrichtenereignisse über das Ursprungsattribut des Fensters empfangen können, und sein Wert kann eine Zeichenfolge " " (was unbegrenzt bedeutet) oder ein URI sein. Wenn beim Senden einer Nachricht das Protokoll, die Hostadresse oder der Port des Zielfensters nicht mit dem von targetOrigin bereitgestellten Wert übereinstimmt, wird die Nachricht nicht gesendet; nur wenn die drei genau übereinstimmen, wird die Nachricht gesendet. Dieser Mechanismus wird verwendet, um zu steuern, an welche Fenster die Nachricht gesendet werden kann; beispielsweise wenn postMessage verwendet wird, um Passwörter zu übertragen, ist dieser Parameter besonders wichtig, und sein Wert muss vollständig mit dem Ursprungsattribut des beabsichtigten Empfängers der Nachricht übereinstimmen die das Passwort enthalten, um zu verhindern, dass das Passwort von einem böswilligen Dritten abgefangen wird. Wenn Sie genau wissen, an welches Fenster die Nachricht gesendet werden soll, geben Sie stattdessen immer einen Zielursprung mit einem genauen Wert an . Wenn das genaue Ziel nicht angegeben wird, führt dies zu einer Datenexfiltration auf jede bösartige Website, die an den Daten interessiert ist.
• transfer Optional
  ist eine Reihe von übertragbaren Objekten, die zusammen mit der Nachricht übergeben werden.Das Eigentum an diesen Objekten wird auf den Empfänger der Nachricht übertragen, während der Absender nicht länger das Eigentum behält.
  Beispiel:

var iframe = top.$('#vuePicture')[0];//获取传递信息的frame
iframe.onload = function() {//页面加载完之后
   iframe.contentWindow.postMessage(vuePictureData,'*');//这个frame下面的窗口传递信息
   iframe.focus();
};

BB

window.addEventListener("message", receiveMessage, false);//接收的窗口绑定事件
function receiveMessage(event)//接收事件的回调，event对象为接收到的信息对象载体
{
  console.log(event.data) // 打印接收的信息
}