Bagaimanakah anda menggunakan postMessage dalam javascript?

postMessage dalam javascript

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.

Kajian yang disyorkan: "Tutorial Asas JavaScript"

Atas ialah kandungan terperinci Bagaimanakah anda menggunakan postMessage dalam javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!