跨文檔消息傳輸示例

1、主講人： 曹興會跨文檔消息傳輸示例跨文檔消息傳輸示例1.跨文檔消息傳輸示例在本例中，實(shí)現(xiàn)了主頁面與主頁面中的iframe子頁面之間的互相通信。首先，主頁面向iframe子頁面發(fā)送消息，iframe子頁面接收消息，顯示在本頁面中，然后向主頁面返回消息。最后，主頁面接收消息，然后將該消息用alert方法彈出。另外，主頁面與iframe子頁面被配置在不同域中，以實(shí)現(xiàn)跨域通信。本示例中主頁面的代碼，如代碼清單所示。跨域通信示例的主頁面1.跨文檔消息傳輸示例跨域通信示例/（1）監(jiān)聽message事件window.addEventListener(message,function(ev)/（2）忽略指定U

2、RL地址之外的頁面?zhèn)鬟^來的消息if(ev.origin!=)return;/（3）顯示消息1.跨文檔消息傳輸示例alert(從+ev.origin+那里傳過來的消息：n+ev.data+);,false);function hello()var iframe=window.frames0;/（4）傳遞消息iframe.postMessage(你好, /test/);跨域通信示例1.跨文檔消息傳輸示例該示例的iframe子頁面中的代碼如代碼清單2所示。代碼清單2跨域通信示例的iframe頁面window.addEventListener

3、(message,function(ev)if(ev.origin!=)return;document.body.innerHTML=從+ev.origin+那里傳來的消息。+ev.data+;/（5）向主頁面發(fā)送消息ev.source.postMessage(你好。這里是+this.location, ev.origin);,false);1.跨文檔消息傳輸示例下面對本示例中幾個關(guān)鍵之處進(jìn)行補(bǔ)充說明。1）通過對window對象的message事件進(jìn)行監(jiān)聽，可以接收消息。2）通過訪問message事件的origin屬性，可以獲取消息的發(fā)送源。請注意，發(fā)送源與網(wǎng)站的

4、URL地址不是同一概念，發(fā)送源只包括域名與端口號，為了不接收從其他源惡意發(fā)送過來的消息，最好對發(fā)送源做個檢查。3）通過訪問message事件的data屬性，可以取得消息內(nèi)容（可以是任何JavaScript對象）。4）使用postMessage方法發(fā)送消息。5）通過訪問message事件的source屬性，可以獲取消息發(fā)送源的窗口對象（準(zhǔn)確地說，應(yīng)該是窗口的代理對象）。1.跨文檔消息傳輸示例請記住，本節(jié)中所說的網(wǎng)頁文檔與網(wǎng)頁文檔之間的消息傳輸，針對的不僅僅是文本消息。如果使用JSON對象的stringify方法將JavaScript對象轉(zhuǎn)成文本，使用JSON對象的parse方法將文本還原為JavaScript對象，任何JavaScript對象都可以通過這種方式在網(wǎng)頁文檔與網(wǎng)頁文檔之間、端口與端口之間、域與域之間互相傳遞?，F(xiàn)在，F(xiàn)irefox4以