你可能不知道的跨域解決方案

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

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

• GET請求用JSONP
• 其餘請求用同源iframe作代理

JSONP的介紹不少，這裏就很少說了。

而同源iframe作代理主要是主窗口與iframe的通信問題，由於這裏也有同源策略。常見的方法是使用window.name或者經過url param來通信。但這些方法都須要反覆加載iframe來完成的，資源消耗較高，有沒有更好的方案呢？

 

window.postMessage

window.postMessage最先由IE8引入，主要爲了解決跨文檔通信問題，如下使其支持列表：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (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 (IE八、9 不支持)
• targetOrigin: 限定消息接收範圍，不限制請使用 ‘*’

 

message事件

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

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

 

跨非同源文檔通信

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

http://html5demos.com/postmessage2

 

方案基本原理

基本原理如今就比較清晰了，咱們依然使用同源iframe作代理，可是主頁面與iframe的通信方式是利用postMessage實現的。

 

現成方案

若是你已經只爲IE8以上瀏覽器用戶服務了（國外項目基本已經將IE六、7淘汰了），並且你不想處理這些兼容性問題，那麼你能夠選用下面老外實現的現成方案：

https://github.com/jpillora/xdomain