資訊專欄INFORMATION COLUMN
摘要：小結(jié)小結(jié)本文主要是介紹了一個方案及其使用方法，來解決父窗體與子窗體的通信問題。同時提供了一個完整的實例，可以實現(xiàn)子窗體向父窗體傳遞消息，父窗體通過監(jiān)聽消息事件，來獲取子窗體消息的目的。
歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實踐干貨哦~
本文由前端林子發(fā)表于云+社區(qū)專欄
本文主要會介紹如何基于MessengerJS，實現(xiàn)iframe父窗體與子窗體間的通信，傳遞數(shù)據(jù)信息。同時本文會提供一個可運行的實例代碼，實現(xiàn)在父窗體中，獲取到來自子窗體的數(shù)據(jù)的效果。
(1)需要在當(dāng)前的前端項目中，使用iframe嵌套別的站點頁面。
(2)當(dāng)子窗體觸發(fā)了一個事件后，要給父窗體傳一個跳轉(zhuǎn)地址的url。父窗體監(jiān)聽到這個事件后，根據(jù)接收到的url，來更新當(dāng)前父窗體的url，實現(xiàn)頁面的跳轉(zhuǎn)。
可以采用MessengerJS方案，該方案可以實現(xiàn)父窗體與iframe之間的通信、多個iframe之間的通信。不過要前提是要確保對不同域的頁面有修改權(quán)限，并且父窗體、子窗體頁面都要同時加載這個MessengerJS。
(1) 在需要通信的父窗體、和子窗體的文檔中，都需要引入MessengerJS。
(2) 父窗體和子窗體各自的文檔（document）中，都需要自己的Messenger與其他文檔通信，父窗體和子窗體的window對象都對應(yīng)著有且僅有一個Messenger對象，該Messenger對象會負責(zé)當(dāng)前window的所有通信任務(wù)。因此，每個Messenger對象都需要唯一的名字，這樣它們之間才可以知道是在跟誰通信。另外，MessengerJS方案推薦指定項目名稱，（類似命名空間的作用），以增強代碼健壯性與組件復(fù)用性，避免未來與其他項目沖突。(注意: 項目名稱應(yīng)使用字符串類型)
父窗體與子窗體初始化Messenger對象：
// 父窗口中 - 初始化Messenger對象
// 推薦指定項目名稱, 避免Mashup類應(yīng)用中, 多個開發(fā)商之間的沖突
var messenger = new Messenger("Parent", "projectName");
// iframe中 - 初始化Messenger對象
// 注意! Messenger之間必須保持項目名稱一致, 否則無法匹配通信
var messenger = new Messenger("iframe1", "projectName");
// 多個iframe, 使用不同的名字
var messenger = new Messenger("iframe2", "projectName");(3) 在發(fā)現(xiàn)消息前，目標(biāo)文檔要確保已經(jīng)監(jiān)聽了消息事件：
messenger.listen(function(msg){
alert("收到消息: " + msg);
});(4) 父窗體想給子窗體發(fā)信息，要添加消息對象，明確告知當(dāng)前的父窗體，要發(fā)送消息的子窗體的window引用與messenger對象的名字：
// 父窗口中 - 添加消息對象, 明確告訴父窗口iframe的window引用與名字
messenger.addTarget(iframe1.contentWindow, "iframe1");
// 父窗口中 - 可以添加多個消息對象
messenger.addTarget(iframe2.contentWindow, "iframe2");(5) 發(fā)消息時，要指定messenger的名字和消息，例如父窗體要給子窗體發(fā)消息：
// 父窗口中 - 向單個iframe發(fā)消息
messenger.targets["iframe1"].send(msg1);
messenger.targets["iframe2"].send(msg2);
// 父窗口中 - 向所有目標(biāo)iframe廣播消息
messenger.send(msg);基于上面的介紹，下面要實現(xiàn)開篇提出的需求了（實例代碼只是示例如何傳遞數(shù)據(jù)，沒有更改父窗體url）。這里分別是父窗體和子窗體的代碼實現(xiàn)，可直接在瀏覽器中打開查看效果，其中messenger.js可以在這里下載，放到項目目錄下。
父窗體：
父窗體
這是父窗體
子窗體：
子窗體
這是子窗體
代碼解釋：
父窗體中嵌入iframe，要先引入messenger.js，同時初始化messenger到一個統(tǒng)一的項目中，其中第一個參數(shù)為自己頁面messenger對象的名字，第二個參數(shù)為項目名稱；然后父窗體要綁定監(jiān)聽消息事件，當(dāng)接收到iframe子窗體發(fā)來的消息后執(zhí)行。
子窗體也要先引入messenger.js，同時初始化一個messenger到一個統(tǒng)一的項目中，其中第一個參數(shù)為自己頁面messenger對象的名字，第二個參數(shù)為項目名稱；然后添加消息對象，告知子窗體的window引用與messenger對象的名字。然后在觸發(fā)onclick事件時，向父窗口傳遞消息。發(fā)消息時，要指定接收消息的父窗體的messenger的名字，以及傳遞的消息。
本文主要是介紹了一個MessengerJS方案及其使用方法，來解決父窗體與子窗體的通信問題。同時提供了一個完整的實例，可以實現(xiàn)子窗體向父窗體傳遞消息，父窗體通過監(jiān)聽消息事件，來獲取子窗體消息的目的。如有問題，歡迎指正。
相關(guān)閱讀
【每日課程推薦】機器學(xué)習(xí)實戰(zhàn)！快速入門在線廣告業(yè)務(wù)及CTR相應(yīng)知識
此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請點擊
搜索關(guān)注公眾號「云加社區(qū)」，第一時間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！
海量技術(shù)實踐經(jīng)驗，盡在云加社區(qū)！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1538.html
摘要：作為對象屬性的文檔元素如果文檔中用屬性為元素命名。其就是交互窗口中的每個窗口窗體都是的執(zhí)行上下文。以對象作為全局對象，這樣的話，一個窗口窗體中的代碼可以應(yīng)用到其他窗口或者窗體并且同源策略沒有進行阻止。 作為window對象屬性的文檔元素 如果html文檔中用id屬性為元素命名。并且如果 window對象沒有此名字的屬性，則window對象會賦予一個屬性，其名字為id屬性的值，其值指向該...
摘要：四通過跨域一個頁面嵌入一個外域的頁面雖然兩個窗體之前能獲取彼此的對象，但是卻拿不到上的屬性和方法，例如一個頁面嵌入一個的我是父窗體的方法嵌入的窗體跟的域名不同，很明顯是跨域的，雖然能獲取到對象，但是拿不到頁面的任何方法和屬性。 js跨域是指通過js在不同域之間進行相互通信或者數(shù)據(jù)傳輸，只要協(xié)議，域名，端口號其中有一個不同，就是跨域。下面總結(jié)一下我了解到的常用的跨域方法。 一：通過jso...
function setIframeHeight(id){ try{ var iframe = document.getElementById(id); if(iframe.attachEvent){ iframe.attachEvent(onload, function(){ iframe.heigh...
摘要：實際上是一個讓出線程的標(biāo)志遇到會立即返回一個狀態(tài)的。一個簡單的防抖函數(shù)如果定時器存在則清除重新開始定時執(zhí)行缺點只能在最后執(zhí)行，不能立即被執(zhí)行，在某些情況下不適用。假設(shè)壓入棧的所有數(shù)字均不相等。接收數(shù)據(jù)不受同源政策限制。 開始 盡管秋招還沒有拿到offer（好難過），但是一些知識點還是要總結(jié)的，既然自己選了這條路，那就一定要堅定不移的走下去...... 注意 new 運算符的優(yōu)先級 fu...
閱讀 816·2023-04-26 01:30
閱讀 3369·2021-11-24 10:32
閱讀 2272·2021-11-22 14:56
閱讀 2094·2021-11-18 10:07
閱讀 614·2019-08-29 17:14
閱讀 697·2019-08-26 12:21
閱讀 3165·2019-08-26 10:55
閱讀 3018·2019-08-23 18:09
