問(wèn)題：
做前端開發(fā)所遇到的一些消息傳遞圾结，除了前端和后端消息傳遞之外瑰剃，還有幾個(gè)經(jīng)常遇到的問(wèn)題。
- 頁(yè)面和其打開的新窗口的消息傳遞
- 多窗口之間的消息傳遞
- 頁(yè)面與嵌套的iframe消息傳遞
- 以上三個(gè)問(wèn)題均是跨域數(shù)據(jù)傳遞
解決跨域辦法：
- document.domain+iframe的設(shè)置筝野，應(yīng)用于主域相同而子域不同
- 利用iframe和location.hash晌姚，數(shù)據(jù)直接暴露在了url中粤剧，數(shù)據(jù)容量和類型都有限
- window.name 保存數(shù)據(jù)以及跨域 iframe 靜態(tài)代理動(dòng)態(tài)傳輸方案，充分的運(yùn)用了window.name因?yàn)轫?yè)面的url改變而name不改變的特性挥唠。
html5中最炫酷的API之一：
就是 跨文檔消息傳輸Cross Document Messaging抵恋。高級(jí)瀏覽器Internet Explorer 8+, chrome，F(xiàn)irefox , Opera 和 Safari 都將支持這個(gè)功能宝磨。這個(gè)功能實(shí)現(xiàn)也非常簡(jiǎn)單主要包括接受信息的”message”事件和發(fā)送消息的”postMessage”方法弧关。
postMessage()
這些問(wèn)題都有一些解決辦法，但html5引入的message的API可以更方便唤锉、有效世囊、安全的解決這些難題。postMessage()方法允許來(lái)自不同源的腳本采用異步方式進(jìn)行有限的通信窿祥，可以實(shí)現(xiàn)跨文本檔株憾、多窗口、跨域消息傳遞晒衩。
postMessage(data,origin)方法接受兩個(gè)參數(shù)
1.data:要傳遞的數(shù)據(jù)嗤瞎，html5規(guī)范中提到該參數(shù)可以是JavaScript的任意基本類型或可復(fù)制的對(duì)象，然而并不是所有瀏覽器都做到了這點(diǎn)兒听系，部分瀏覽器只能處理字符串參數(shù)猫胁，所以我們?cè)趥鬟f參數(shù)的時(shí)候需要使用JSON.stringify()方法對(duì)對(duì)象參數(shù)序列化，在低版本IE中引用json2.js可以實(shí)現(xiàn)類似效果跛锌。
2.origin：字符串參數(shù)，指明目標(biāo)窗口的源届惋，協(xié)議+主機(jī)+端口號(hào)[+URL]髓帽，URL會(huì)被忽略，所以可以不寫脑豹，這個(gè)參數(shù)是為了安全考慮郑藏，postMessage()方法只會(huì)將message傳遞給指定窗口，當(dāng)然如果愿意也可以建參數(shù)設(shè)置為"*"瘩欺，這樣可以傳遞給任意窗口必盖，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。
