Halaman induk dan halaman anak, kedua-dua halaman berada dalam domain yang berbeza dan postMessage digunakan dalam dialog antara mereka. Untuk kemudahan, mereka secara kolektif dirujuk sebagai halaman F dan C di bawah.
Acara klik butang pada halaman C menghantar mesej kecil C ke halaman F. Halaman F menerima mesej kecil C dan melaksanakan logik LC Selepas pelaksanaan LC selesai, halaman F menghantar mesej kecil F ke halaman C. Halaman C menerima mesej Ke mesej kecil F laksanakan LF logik. Dalam satu perkataan, ia bermakna halaman F dan C berkomunikasi antara satu sama lain.
boleh dianggap sebagai
serupa dengan komunikasi komponen ibu bapa-anak dalam tindak balas.
Kod js halaman C:
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);*/Kod js halaman F:
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);Ringkasnya, kaedah ini menyediakan komunikasi antara dua halaman yang tidak berkaitan, membenarkan projek Terbina luaran atau iframe terbenam boleh berkomunikasi antara satu sama lain.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
