跨文檔消息傳輸示例

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

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

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

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