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

出于浏览器的同源策略，咱们常常会遇到浏览器跨域的问题。

简单的说跨域基本解决方案是：

• 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