关于跨域

跨域的几种方法及优缺点

1. JSONP跨域

优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，它的兼容性更好，在更古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持，并且在请求完毕后可以通过调用callback的方式回传结果
缺点：它只支持get请求而不支持post等其他类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行Javascript调用的问题

通过CORS跨域（只要服务器实现了CORS接口，就可以跨域通信）

CORS(Cross-Origin Resource Sharing)跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。目前所有浏览器都支持这个功能，IE浏览器不能低于10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉

• CORS与JSONP对比
  • JSONP只能实现GET请求，而CORS能实现所有的HTTP请求。
  • 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理
  • JSONP主要被老的浏览器支持，它们旺旺不支持CORS，而绝大多数现代浏览器都已经支持CORS
    总结：CORS与JSONP相比，无疑更为先进、方便和可靠

通过HTML5的postMessage跨域

高级浏览器IE8+，chrome,Firefox,Opera,Safari都支持这个功能。这个功能主要包括接受信息的“message”事件和发送消息的“postMeassage”方法。比如demo.cn域的A页面通过iframe嵌入了一个google.com域的B页面，可以通过以下方式实现A和B的通信

A页面通过postMessage方法发送信息：

window.onload = function() {
  var ifr = document.getElementById('ifr');
  var targetOrigin = "http://www.google.com";
  ifr.contentWindow.postMessage('hello world', targetOrigin);
}

postMessage的使用方法：

• otherWindow.postMessage(message, targetOrigin)
  • otherWindow：指目标窗口，也就是给哪个window发消息，是window.frames属性的成员或者由window.open方法创建的窗口
  • message：是要发送的消息，类型为String、Object（IE8、9不支持）
  • targetOrigin: 是限定消息接收范围，不限制请使用

B页面通过message事件监听并接受消息：

var onmessage = function (event) {
  var data = event.data;
  var origin = event.origin;
  var source = event.source;
  if (origin === 'http://www.baidu.com') {
    console.log(data);
  }
}
if (typeof window.addEventListener !== 'undefined') {
  window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent !== 'undefined') {
  window.attchEvent('onmessage', onmessage);
}

同理，也可以B页面发送消息，然后A页面监听并接受消息

通过 document.domain 跨域

通过 location.hash 跨域

通过 window.name 跨域