javascript中postMessage的用法

本篇內容主要講解“javascript中postMessage的用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“javascript中postMessage的用法”吧!

父頁面、子頁面，兩頁面不同域，之間對話用到了postMessage。下面為了方便統稱為F、C頁。

C頁按鈕的點擊事件向F頁發送一個消息小C，F頁收到消息小C執行邏輯LC，LC執行完畢，F頁向C頁發送一個消息小F，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);

總之，此方法提供了兩個不相干頁面的通信，使得外建的項目或者內嵌的iframe，可以互相通信。

到此，相信大家對“javascript中postMessage的用法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！