Comment utilisez-vous postMessage en javascript ?

postMessage en javascript

Page parent et page enfant, les deux pages sont dans des domaines différents, et postMessage est utilisé dans le dialogue entre elles. Pour plus de commodité, elles sont collectivement appelées pages F et C ci-dessous.

L'événement de clic du bouton sur la page C envoie un message petit C à la page F. La page F reçoit le message petit C et exécute la logique LC. Une fois l'exécution de LC terminée, la page F envoie un message petit F à la page C. La page C reçoit le message petit F. Exécute le LF logique. En un mot, cela signifie que les pages F et C communiquent entre elles.

peut être considéré comme

similaire à la communication composante parent-enfant en réaction.

Code js de la page 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);*/

Code js de la page 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);

En bref, cette méthode assure la communication entre deux pages non liées, afin que des projets externes ou des iframes intégrés puissent communiquer entre eux.

Apprentissage recommandé : "Tutoriel de base javascript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!