本文主要會介紹如何基於messengerjs，實現iframe父窗體與子窗體間的通訊，傳遞資料資訊。同時本文會提供乙個可執行的例項**，實現在父窗體中，獲取到來自子窗體的資料的效果。
(1)需要在當前的前端專案中，使用iframe巢狀別的站點頁面。
(2)當子窗體觸發了乙個事件後，要給父窗體傳乙個跳轉位址的url。父窗體監聽到這個事件後，根據接收到的url，來更新當前父窗體的url，實現頁面的跳轉。
可以採用messengerjs方案，該方案可以實現父窗體與iframe之間的通訊、多個iframe之間的通訊。不過要前提是要確保對不同域的頁面有修改許可權，並且父窗體、子窗體頁面都要同時載入這個messengerjs。
(1) 在需要通訊的父窗體、和子窗體的文件中，都需要引入messengerjs。
(2) 父窗體和子窗體各自的文件（document）中，都需要自己的messenger與其他文件通訊，父窗體和子窗體的window物件都對應著有且僅有乙個messenger物件，該messenger物件會負責當前window的所有通訊任務。因此，每個messenger物件都需要唯一的名字，這樣它們之間才可以知道是在跟誰通訊。另外，messengerjs方案推薦指定專案名稱，（類似命名空間的作用），以增強**健壯性與元件復用性，避免未來與其他專案衝突。(注意: 專案名稱應使用字串型別)
父窗體與子窗體初始化messenger物件：
//父視窗中 - 初始化messenger物件
//推薦指定專案名稱, 避免mashup類應用中, 多個開發商之間的衝突
var messenger = new messenger('parent', 'projectname'); //
iframe中 - 初始化messenger物件
//注意! messenger之間必須保持專案名稱一致, 否則無法匹配通訊
var messenger = new messenger('iframe1', 'projectname'); //
多個iframe, 使用不同的名字
var messenger = new messenger('iframe2', 'projectname');
(3) 在發現訊息前，目標文件要確保已經監聽了訊息事件：
messenger.listen(function(msg));
(4) 父窗體想給子窗體發資訊，要新增訊息物件，明確告知當前的父窗體，要傳送訊息的子窗體的window引用與messenger物件的名字：
//父視窗中 - 新增訊息物件, 明確告訴父視窗iframe的window引用與名字
messenger.addtarget(iframe1.contentwindow, 'iframe1'); //
父視窗中 - 可以新增多個訊息物件
messenger.addtarget(iframe2.contentwindow, 'iframe2');
(5) 發訊息時，要指定messenger的名字和訊息，例如父窗體要給子窗體發訊息：
//父視窗中 - 向單個iframe發訊息
messenger.targets['iframe1'].send(msg1);
messenger.targets['iframe2'].send(msg2); //
父視窗中 - 向所有目標iframe廣播訊息
messenger.send(msg);
2.例項
父窗體：.
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>父窗體
title
>
<
style
type
="text/css"
>
style
>
<
script
type
="text/j**ascript"
src="./messenger.js"
>
script
>
head
>
<
body
>
<
div>這是父窗體
div>
<
div
id="msg"
>
div>
<
iframe
id="iframe1"
name
="iframe1"
src="./child.html"
width
="600px"
height
="316px"
style
="z-index: 100000;position: absolute;"
>
iframe
>
body
>
<
script
type
="text/j**ascript"
>
//父頁面中,註冊乙個messager到乙個統一的專案中,第乙個引數為自己頁面的名稱，第二個引數為專案名稱
varmessenger
=new
messenger(
'parent',
'monitor'),
iframe1
=document.getelementbyid(
'iframe1');
//父頁面中繫結監聽訊息事件，當接受到iframe1發來的訊息後執行
messenger.listen(
function
(msg) );
script
>
html
>
子窗體：
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>子窗體
title
>
<
style
type
="text/css"
>
style
>
<
script
type
="text/j**ascript"
src="./messenger.js"
>
script
>
head
>
<
body
>
<
div
style
="background: #8cb08b;height:300px;"
>
<
div>這是子窗體
div>
<
input
type
="button"
onclick
="sendmessage('這是一條來自子窗體的訊息!')"
value
="按鈕"
/>
div>
body
>
<
script
type
="text/j**ascript"
>
//子頁面中,註冊乙個messager到乙個統一的專案中,第乙個引數為自己頁面的名稱，第二個引數為專案名稱
varmessenger
=new
messenger(
'iframe1',
'monitor');
//新增訊息物件, 明確告訴子視窗iframe的window引用與名字
messenger.addtarget(window.parent,
"parent");
function
sendmessage(msg)
script
>
html
>
**解釋：
父窗體中嵌入iframe，要先引入messenger.js，同時初始化messenger到乙個統一的專案中，其中第乙個引數為自己頁面messenger物件的名字，第二個引數為專案名稱；然後父窗體要繫結監聽訊息事件，當接收到iframe子窗體發來的訊息後執行。
子窗體也要先引入messenger.js，同時初始化乙個messenger到乙個統一的專案中，其中第乙個引數為自己頁面messenger物件的名字，第二個引數為專案名稱；然後新增訊息物件，告知子窗體的window引用與messenger物件的名字。然後在觸發onclick事件時，向父視窗傳遞訊息。發訊息時，要指定接收訊息的父窗體的messenger的名字，以及傳遞的訊息。
本文主要是介紹了乙個messengerjs方案及其使用方法，來解決父窗體與子窗體的通訊問題。同時提供了乙個完整的例項，可以實現子窗體向父窗體傳遞訊息，父窗體通過監聽訊息事件，來獲取子窗體訊息的目的。如有問題，歡迎指正。
實現iframe父窗體與子窗體的通訊
本文主要會介紹如何基於messengerjs，實現iframe父窗體與子窗體間的通訊，傳遞資料資訊。同時本文會提供乙個可執行的例項 實現在父窗體中，獲取到來自子窗體的資料的效果。0.背景介紹 1 需要在當前的前端專案中，使用iframe巢狀別的站點頁面。2 當子窗體觸發了乙個事件後，要給父窗體傳乙個...
iframe巢狀iframe往父窗體傳值
第乙個iframe function closenewwin username,showuname,taskpeotime 第二個iframe function closeframe username,showuname,taskpeotime userinput中對應的方法 function cl...
iframe與父頁面傳值
最近做的專案中用到了不少iframe，而且需要實現 從父頁面獲取iframe中某個元素的值或則從iframe頁面獲取其父頁面上某個元素的值。1 父頁面獲取iframe中的元素值 根據iframe的id獲取物件 var i1 window.frames iframeid var iframe wind...