本篇內(nèi)容主要講解“javascript中postMessage的用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“javascript中postMessage的用法”吧!

創(chuàng)新互聯(lián)公司是一家專業(yè)提供江海企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為江海眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

父頁面、子頁面，兩頁面不同域，之間對(duì)話用到了postMessage。下面為了方便統(tǒng)稱為F、C頁。

C頁按鈕的點(diǎn)擊事件向F頁發(fā)送一個(gè)消息小C，F(xiàn)頁收到消息小C執(zhí)行邏輯LC，LC執(zhí)行完畢，F(xiàn)頁向C頁發(fā)送一個(gè)消息小F，C頁收到消息小F執(zhí)行邏輯LF。一句話，就是F、C頁間相互通信。

可以認(rèn)為

類似于react中的父子組件通信。

C頁js代碼：

var btnObj = document.getElementById('buttons');
btnObj.onclick = function(){
     var defaultAdData = {
                 type:'advert', 
                 gameData:{
                     adId: '123'
                 }
         };
     window.parent.postMessage(JSON.stringify(defaultAdData), '*');
    /*我是錯(cuò)誤代碼：
     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發(fā)送信息~~~~
            window.frames[0].postMessage(JSON.stringify(postIframeData), '*');
      }
}

window.addEventListener("message", receiveMessage, false);

總之，此方法提供了兩個(gè)不相干頁面的通信，使得外建的項(xiàng)目或者內(nèi)嵌的iframe，可以互相通信。

到此，相信大家對(duì)“javascript中postMessage的用法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

新聞標(biāo)題：javascript中postMessage的用法
文章源于：http://chinadenli.net/article26/podpcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、App設(shè)計(jì)、網(wǎng)站排名、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)