JavaScriptでpostMessageをどのように使用しますか?

postMessage in JavaScript

親ページと子ページは異なるドメインにあり、それらの間の対話では 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 が通信できるようにします。お互いに。

推奨学習: 「JavaScript 基本チュートリアル」

以上がJavaScriptでpostMessageをどのように使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。