成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

附實(shí)例！實(shí)現(xiàn)iframe父窗體與子窗體的通信

xiaochao / 1916人閱讀

摘要：小結(jié)小結(jié)本文主要是介紹了一個(gè)方案及其使用方法，來解決父窗體與子窗體的通信問題。同時(shí)提供了一個(gè)完整的實(shí)例，可以實(shí)現(xiàn)子窗體向父窗體傳遞消息，父窗體通過監(jiān)聽消息事件，來獲取子窗體消息的目的。

歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~

本文由前端林子發(fā)表于云+社區(qū)專欄

本文主要會(huì)介紹如何基于MessengerJS，實(shí)現(xiàn)iframe父窗體與子窗體間的通信，傳遞數(shù)據(jù)信息。同時(shí)本文會(huì)提供一個(gè)可運(yùn)行的實(shí)例代碼，實(shí)現(xiàn)在父窗體中，獲取到來自子窗體的數(shù)據(jù)的效果。

0.背景介紹

(1)需要在當(dāng)前的前端項(xiàng)目中，使用iframe嵌套別的站點(diǎn)頁面。

(2)當(dāng)子窗體觸發(fā)了一個(gè)事件后，要給父窗體傳一個(gè)跳轉(zhuǎn)地址的url。父窗體監(jiān)聽到這個(gè)事件后，根據(jù)接收到的url，來更新當(dāng)前父窗體的url，實(shí)現(xiàn)頁面的跳轉(zhuǎn)。

1.采用方案

1.1 MessengerJS方案

可以采用MessengerJS方案，該方案可以實(shí)現(xiàn)父窗體與iframe之間的通信、多個(gè)iframe之間的通信。不過要前提是要確保對(duì)不同域的頁面有修改權(quán)限，并且父窗體、子窗體頁面都要同時(shí)加載這個(gè)MessengerJS。

1.2 使用方法

(1) 在需要通信的父窗體、和子窗體的文檔中，都需要引入MessengerJS。

(2) 父窗體和子窗體各自的文檔（document）中，都需要自己的Messenger與其他文檔通信，父窗體和子窗體的window對(duì)象都對(duì)應(yīng)著有且僅有一個(gè)Messenger對(duì)象，該Messenger對(duì)象會(huì)負(fù)責(zé)當(dāng)前window的所有通信任務(wù)。因此，每個(gè)Messenger對(duì)象都需要唯一的名字，這樣它們之間才可以知道是在跟誰通信。另外，MessengerJS方案推薦指定項(xiàng)目名稱，（類似命名空間的作用），以增強(qiáng)代碼健壯性與組件復(fù)用性，避免未來與其他項(xiàng)目沖突。(注意: 項(xiàng)目名稱應(yīng)使用字符串類型)

父窗體與子窗體初始化Messenger對(duì)象：

 // 父窗口中 - 初始化Messenger對(duì)象
 // 推薦指定項(xiàng)目名稱, 避免Mashup類應(yīng)用中, 多個(gè)開發(fā)商之間的沖突
 var messenger = new Messenger("Parent", "projectName");

 // iframe中 - 初始化Messenger對(duì)象
 // 注意! Messenger之間必須保持項(xiàng)目名稱一致, 否則無法匹配通信
 var messenger = new Messenger("iframe1", "projectName");

 // 多個(gè)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ā)信息，要添加消息對(duì)象，明確告知當(dāng)前的父窗體，要發(fā)送消息的子窗體的window引用與messenger對(duì)象的名字：

// 父窗口中 - 添加消息對(duì)象, 明確告訴父窗口iframe的window引用與名字
 messenger.addTarget(iframe1.contentWindow, "iframe1");

 // 父窗口中 - 可以添加多個(gè)消息對(duì)象
 messenger.addTarget(iframe2.contentWindow, "iframe2");

(5) 發(fā)消息時(shí)，要指定messenger的名字和消息，例如父窗體要給子窗體發(fā)消息：

 // 父窗口中 - 向單個(gè)iframe發(fā)消息
 messenger.targets["iframe1"].send(msg1);
 messenger.targets["iframe2"].send(msg2);
 // 父窗口中 - 向所有目標(biāo)iframe廣播消息
 messenger.send(msg);

2.實(shí)例

基于上面的介紹，下面要實(shí)現(xiàn)開篇提出的需求了（實(shí)例代碼只是示例如何傳遞數(shù)據(jù)，沒有更改父窗體url）。這里分別是父窗體和子窗體的代碼實(shí)現(xiàn)，可直接在瀏覽器中打開查看效果，其中messenger.js可以在這里下載，放到項(xiàng)目目錄下。

父窗體：





    
    父窗體
    
    
    




    
這是父窗體

子窗體：





    
    子窗體
    
    
    




    

        
這是子窗體

代碼解釋：

父窗體中嵌入iframe，要先引入messenger.js，同時(shí)初始化messenger到一個(gè)統(tǒng)一的項(xiàng)目中，其中第一個(gè)參數(shù)為自己頁面messenger對(duì)象的名字，第二個(gè)參數(shù)為項(xiàng)目名稱；然后父窗體要綁定監(jiān)聽消息事件，當(dāng)接收到iframe子窗體發(fā)來的消息后執(zhí)行。

子窗體也要先引入messenger.js，同時(shí)初始化一個(gè)messenger到一個(gè)統(tǒng)一的項(xiàng)目中，其中第一個(gè)參數(shù)為自己頁面messenger對(duì)象的名字，第二個(gè)參數(shù)為項(xiàng)目名稱；然后添加消息對(duì)象，告知子窗體的window引用與messenger對(duì)象的名字。然后在觸發(fā)onclick事件時(shí)，向父窗口傳遞消息。發(fā)消息時(shí)，要指定接收消息的父窗體的messenger的名字，以及傳遞的消息。

3.小結(jié)

本文主要是介紹了一個(gè)MessengerJS方案及其使用方法，來解決父窗體與子窗體的通信問題。同時(shí)提供了一個(gè)完整的實(shí)例，可以實(shí)現(xiàn)子窗體向父窗體傳遞消息，父窗體通過監(jiān)聽消息事件，來獲取子窗體消息的目的。如有問題，歡迎指正。

相關(guān)閱讀
【每日課程推薦】機(jī)器學(xué)習(xí)實(shí)戰(zhàn)！快速入門在線廣告業(yè)務(wù)及CTR相應(yīng)知識(shí)

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請(qǐng)點(diǎn)擊

搜索關(guān)注公眾號(hào)「云加社區(qū)」，第一時(shí)間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！

海量技術(shù)實(shí)踐經(jīng)驗(yàn)，盡在云加社區(qū)！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1538.html

相關(guān)文章

  • 作為window對(duì)象屬性的元素 多窗口和窗體

    摘要：作為對(duì)象屬性的文檔元素如果文檔中用屬性為元素命名。其就是交互窗口中的每個(gè)窗口窗體都是的執(zhí)行上下文。以對(duì)象作為全局對(duì)象，這樣的話，一個(gè)窗口窗體中的代碼可以應(yīng)用到其他窗口或者窗體并且同源策略沒有進(jìn)行阻止。 作為window對(duì)象屬性的文檔元素 如果html文檔中用id屬性為元素命名。并且如果 window對(duì)象沒有此名字的屬性，則window對(duì)象會(huì)賦予一個(gè)屬性，其名字為id屬性的值，其值指向該...

    fredshare 評(píng)論0 收藏0

  • js中幾種跨域的方法

    摘要：四通過跨域一個(gè)頁面嵌入一個(gè)外域的頁面雖然兩個(gè)窗體之前能獲取彼此的對(duì)象，但是卻拿不到上的屬性和方法，例如一個(gè)頁面嵌入一個(gè)的我是父窗體的方法嵌入的窗體跟的域名不同，很明顯是跨域的，雖然能獲取到對(duì)象，但是拿不到頁面的任何方法和屬性。 js跨域是指通過js在不同域之間進(jìn)行相互通信或者數(shù)據(jù)傳輸，只要協(xié)議，域名，端口號(hào)其中有一個(gè)不同，就是跨域。下面總結(jié)一下我了解到的常用的跨域方法。 一：通過jso...

    XboxYan 評(píng)論0 收藏0

  • 父窗體計(jì)算Iframe內(nèi)部模塊的高度，付給Iframe

    function setIframeHeight(id){ try{ var iframe = document.getElementById(id); if(iframe.attachEvent){ iframe.attachEvent(onload, function(){ iframe.heigh...

    doodlewind 評(píng)論0 收藏0

  • 2019秋招知識(shí)盲點(diǎn)總結(jié)

    摘要：實(shí)際上是一個(gè)讓出線程的標(biāo)志遇到會(huì)立即返回一個(gè)狀態(tài)的。一個(gè)簡(jiǎn)單的防抖函數(shù)如果定時(shí)器存在則清除重新開始定時(shí)執(zhí)行缺點(diǎn)只能在最后執(zhí)行，不能立即被執(zhí)行，在某些情況下不適用。假設(shè)壓入棧的所有數(shù)字均不相等。接收數(shù)據(jù)不受同源政策限制。 開始 盡管秋招還沒有拿到offer（好難過），但是一些知識(shí)點(diǎn)還是要總結(jié)的，既然自己選了這條路，那就一定要堅(jiān)定不移的走下去...... 注意 new 運(yùn)算符的優(yōu)先級(jí) fu...

    Doyle 評(píng)論0 收藏0

  • 跨域那些事兒

    摘要：什么是跨域我們先看下以下場(chǎng)景開啟兩個(gè)本地服務(wù)器，頁面為，其中嵌套了，頁面想使用頁面的數(shù)據(jù)，例如調(diào)用它的方法，會(huì)報(bào)以下錯(cuò)誤如圖所示，，，譯為協(xié)議主機(jī)和端口號(hào)必須符合，否則，就是跨域?？缬虻膸追N常見方案同源策略的限制范圍有以下幾種和無法讀取。 什么是跨域 我們先看下以下場(chǎng)景：開啟兩個(gè)本地服務(wù)器，頁面A為localhost:9800，其中嵌套了iframeB localhost:9000，頁...

    nevermind 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<