開発プロセスでは、異なるプロジェクトのページが入れ子になっていることがよくあります.これは初期のマイクロフロントエンド開発に少し似ています.その中で最も一般的に使用されるのは、そのような要件に対処するための iframe です. iframe 間の通信の問題: 埋め込まれた iframe がクロスドメインでない場合、それらの間の通信は非常に単純ですが、クロスドメインの場合、ブラウザーは iframe 間の通信時にクロスドメインの問題を報告します。この時点で、 HTML5 に付属の postmessage メソッドを使用するには
メッセージを送る
otherWindow.postMessage(message, targetOrigin, [transfer]);
- その他のウィンドウ
iframe の contentWindow プロパティ、window.open の実行によって返されるウィンドウ オブジェクト、名前付きまたは数値でインデックス付けされた window.frames など、別のウィンドウへの参照。
- message
他のウィンドウに送信されるデータ。これは、構造化されたクローニング アルゴリズムによってシリアル化されます。これは、データ オブジェクトを自分でシリアル化することなく、何の制限もなくターゲット ウィンドウに安全に転送できることを意味します。[1] - targetOrigin は、
ウィンドウの origin 属性を介してメッセージ イベントを受信できるウィンドウを指定します。その値は、文字列 " " (無制限を示す) または URI にすることができます。メッセージを送信するとき、ターゲット ウィンドウのプロトコル、ホスト アドレス、またはポートのいずれかが targetOrigin によって提供される値と一致しない場合、メッセージは送信されません。3 つが完全に一致する場合にのみ、メッセージが送信されます。このメカニズムは、メッセージを送信できるウィンドウを制御するために使用されます。たとえば、postMessage を使用してパスワードを送信する場合、このパラメーターは特に重要であり、その値はメッセージの受信者の origin 属性と完全に一致する必要があります。悪意のある第三者によるパスワードの傍受を防ぐため。メッセージの送信先ウィンドウが正確にわかっている場合は、代わりに常に targetOrigin に正確な値を指定してください。正確なターゲットを提供しないと、データに関心のある悪意のあるサイトにデータが流出することになります。 - transfer Optional
は、メッセージとともに渡される Transferable オブジェクトの文字列です. これらのオブジェクトの所有権はメッセージの受信者に譲渡されますが、送信者は所有権を保持しなくなります.
例：
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) // 打印接收的信息
}