使用html5 postMessage和window.name實現多瀏覽器跨域

跨域是個“很古老”的問題，因為瀏覽器的同源策略，導致不同域名下不能進行跨域名請求數據，雖然這樣設計安全了很多，但是對于大型的網站同時維護多個域名就需要進行跨域操作。例如：微博開放平臺的jssdk實現的跨域請求數據，再例如weibo.com和sina.com的同步登錄。

之前我也說過不少跨域的方式了，有結合服務器端的，有純粹javascript實現的跨域，例如：《利用跨域資源共享（CORS）實現ajax跨域調用》、《用document.domain+iframe實現Ajax跨子域》、《通過JSONP實現完美跨域》。在我的上一篇文章《javascript入門到高級PPT》中也提到了跨域。
當然也有不少關于跨域的文章，例如口碑UED的文章《跨域資源共享的10種方式》等等。大家可以去閱讀一下。

今天我說的html5 postMessage和window.name也不是一種新的跨域方式，因為有不少人寫文章寫了，而實際應用的我不知道有哪些人？不過新浪微博的新舊兩個jssdk都是采用這種方式，包括之前的人人網的xd.html，當然現在的人人和facebook都是通過flash實現的跨域，這不是今天說的內容。

html5 postMessage實現跨域

postMessage是html5的一個新功能，可以實現不同域名之間的通信，通過給postMessage方式發送數據，監聽則通過在父子窗口添加onmessage事件進行。
缺點也就很明顯了，只有支持html5的瀏覽器才支持這種跨域方式，像IE6、7當然就拒之門外了！

window.name實現跨域

window.name實現跨域也是一個比較老的問題，之前kejun寫過一個demo，可是給的卻是同域名的通信。
其實kejun的實例中就是實現跨域的，不過他采用了同一個域名，而且過程比較崎嶇：

1. 建立iframe，指定src為被跨域的頁面
2. 被跨域文件修改window.name，將數據傳給window.name
3. 將iframe.src修改為本域代理文件，然后就可以取到contentWindow.name
4. 進行處理數據，清除iframe

充分的運用了window.name因為頁面的url改變而name不改變的特性。
但是如果我們是自己用，還是可以的，而如果我們放出去要別人使用我們寫的東西，那樣學習成本太大。

多瀏覽器雙向跨域

為了解決上面的問題，我們使用的方法就是如果支持postMessage的瀏覽器就使用postMessage，如果不支持的就采用window.name的方式，幸運的是在IE6、7中支持跨域設置window.name，而我們就可以簡單的通過window.name來跨域。然后建立計時器來監聽window.name是否發生了變化，如果變化則接收并分析window.name，然后做請求。

廢話不多說了~直接來個跨域的demo，點擊查看多瀏覽器雙向跨域demo。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈