您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“javascript中postMessage的用法”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“javascript中postMessage的用法”吧!
父頁(yè)面、子頁(yè)面,兩頁(yè)面不同域,之間對(duì)話用到了postMessage。下面為了方便統(tǒng)稱為F、C頁(yè)。
C頁(yè)按鈕的點(diǎn)擊事件向F頁(yè)發(fā)送一個(gè)消息小C,F(xiàn)頁(yè)收到消息小C執(zhí)行邏輯LC,LC執(zhí)行完畢,F(xiàn)頁(yè)向C頁(yè)發(fā)送一個(gè)消息小F,C頁(yè)收到消息小F執(zhí)行邏輯LF。一句話,就是F、C頁(yè)間相互通信。
類似于react中的父子組件通信。
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);*/
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è)不相干頁(yè)面的通信,使得外建的項(xiàng)目或者內(nèi)嵌的iframe,可以互相通信。
到此,相信大家對(duì)“javascript中postMessage的用法”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。