跨域的几种方法及优缺点
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页面监听并接受消息
网友评论