親ページと子ページは異なるドメインにあり、それらの間の対話では postMessage が使用されます。以下では便宜上、これらをまとめてページ F およびページ C と呼びます。
ページ C のボタンのクリック イベントは、メッセージ small C をページ F に送信します。ページ F がメッセージを受信すると、small C はロジック LC を実行します。LC の実行が完了すると、ページ F はメッセージ small を送信します。 F からページ C へ ページ C がメッセージを受信 メッセージ小 F に対して論理 LF を実行つまり、ページ F とページ C が通信することになります。
react における親子コンポーネントの通信と同様に
と考えることができます。
C ページ js コード:
var btnObj = document.getElementById('buttons');
btnObj.onclick = function(){
var defaultAdData = {
type:'advert',
gameData:{
adId: '123'
}
};
window.parent.postMessage(JSON.stringify(defaultAdData), '*');
/*我是错误代码：
var receiveMessage = function(event) {
var datas = JSON.parse(event.data);
if (datas.type === "adGivePrize"&&datas.givePrize) {
alert(‘click’);
}
}
window.addEventListener("message", receiveMessage, false);*/
}
/*我是正确代码：
var receiveMessage = function(event) {
var datas = JSON.parse(event.data);
if (datas.type === "adGivePrize"&&datas.givePrize) {
alert(‘click’);
}
}
window.addEventListener("message", receiveMessage, false);*/
F ページ js コード:
var receiveMessage = function(event) {
var datas = JSON.parse(event.data);
if (datas.type === "advert") {
var postIframeData = {
type:'adGivePrize',
givePrize:true
};
//iframe发送信息~~~~
window.frames[0].postMessage(JSON.stringify(postIframeData), '*');
}
}
window.addEventListener("message", receiveMessage, false);
つまり、このメソッドは 2 つの無関係なページ間の通信を提供し、外部プロジェクトまたは埋め込み iframe が通信できるようにします。お互いに。