出于瀏覽器的同源策略，我們經常會遇到瀏覽器跨域的問題。

簡單的說跨域基本解決方案是：

• GET請求用JSONP
• 其他請求用同源iframe做代理

JSONP的介紹很多，這里就不多說了。

而同源iframe做代理主要是主窗口與iframe的通訊問題，因為這里也有同源策略。常見的方法是使用window.name或者通過url param來通訊。但這些方法都需要反復加載iframe來完成的，資源消耗較高，有沒有更好的方案呢？

?

window.postMessage

window.postMessage最早由IE8引入，主要為了解決跨文檔通訊問題，以下使其支持列表：

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)

Basic support	1.0	6.0 (6.0) [1] [4]	8.0 [2] [3]	9.5	4.0
transfer?argument	?	20.0 (20.0)	Not supported	?	?

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow：目標窗口，是 window.frames 屬性的成員或者由 window.open 方法創建的窗口

• message:?要發送的消息，類型為 String、Object (IE8、9 不支持)
• targetOrigin:?限定消息接收范圍，不限制請使用 ‘*’

?

message事件

再通過綁定該窗口的message事件，來獲取信息，例如：

window.addEventListener('message', function (event) {console.log(event.data); }, false);

?

跨非同源文檔通訊

這給我們提供了一種跨非同源文檔通訊方案。這里有一個簡單的例子：

http://html5demos.com/postmessage2

?

方案基本原理

基本原理現在就比較清晰了，我們依然使用同源iframe做代理，但是主頁面與iframe的通訊方式是利用postMessage實現的。

?

現成方案

如果你已經只為IE8以上瀏覽器用戶服務了（國外項目基本已經將IE6、7淘汰了），而且你不想處理這些兼容性問題，那么你可以選用下面老外實現的現成方案：

https://github.com/jpillora/xdomain

?

總結

以上是生活随笔為你收集整理的你可能不知道的跨域解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。