javascript跨域的方法汇总
此文章学习借鉴了一些其他前端同学的文章，自己做了个实践总结
以下的例子包含的文件均为为http://www.a.com/a.html、http://www.a.com/c.html与http://www.b.com/b.html，要做的都是从a.html获取b.html里的数据
1.JSONP
jsonp是利用script标签没有跨域限制的特性，通过在src的url的参数上附加回调函数名字，然后服务器接收回调函数名字并返回一个包含数据的回调函数
functiondoSomething(data){
//对data处理
}
varscript=document.createElement("script");
script.src="http://www.b.com/b.html?callback=doSomething";
document.body.appendChild(script);
//1.生成一个script标签，将其append在body上，向服务器发出请求
//2.服务器根据callback这个参数生成一个包含数据的函数doSomething({"a","1"})
//3.页面事先已声明doSomething函数，此时执行doSomething(data)这个函数，获得数据
2.HTML5的postMessage
假设在a.html里嵌套个<iframesrc="http://www.b.com/b.html"frameborder="0"></iframe>,在这两个页面里互相通信
a.html
window.onload=function(){
window.addEventListener("message",function(e){
alert(e.data);
});
window.frames[0].postMessage("bdata","http://www.b.com/b.html");
}
b.html
window.onload=function(){
window.addEventListener("message",function(e){
alert(e.data);
});
window.parent.postMessage("adata","http://www.a.com/a.html");
}
这样打开a页面就先弹出adata,再弹出bdata
3.window.name+iframe
window.name的原理是利用同一个窗口在不同的页面共用一个window.name，这个需要在a.com下建立一个代理文件c.html,使同源后a.html能获取c.html的window.name
a.html
variframe=document.createElement("iframe");
iframe.src="http://www.b.com/b.html";
document.body.appendChild(iframe);//现在a.html里建一个引用b.html的iframe，获得b的数据
varflag=true;
iframe.onload=function(){
if(flag){
iframe.src="c.html";
//判断是第一次载入的话，设置代理c.html使和a.html在同目录同源，这样才能在下面的else取到data
flag=false;
}else{//第二次载入由于a和c同源，a可以直接获取c的window.name
alert(iframe.contentWindow.name);
iframe.contentWindow.close();
document.body.removeChild(iframe);
iframe.src='';
iframe=null;
}
}
b.html
window.name="这是b页面的数据";
4.window.location.hash+iframe
b.html将数据以hash值的方式附加到c.html的url上，在c.html页面通过location.hash获取数据后传到a.html(这个例子是传到a.html的hash上，当然也可以传到其他地方)
a.html
variframe=document.createElement("iframe");
iframe.src="http://www.b.com/b.html";
document.body.appendChild(iframe);//在a页面引用b
functioncheck(){//设置个定时器不断监控hash的变化，hash一变说明数据传过来了
varhashs=window.location.hash;
if(hashs){
clearInterval(time);
alert(hashs.substring(1));
}
}
vartime=setInterval(check,30);
b.html
window.onload=function(){
vardata="thisisb'sdata";
variframe=document.createElement("iframe");
iframe.src="http://www.a.com/c.html#"+data;
document.body.appendChild(iframe);//将数据附加在c.html的hash上
}
c.html
//获取自身的hash再传到a.html的hash里，数据传输完毕 parent.parent.location.hash=self.location.hash.substring(1);
5.CORS
CORS是XMLHttpRequestLevel2里规定的一种跨域方式。在支持这个方式的浏览器里，javascript的写法和不跨域的ajax写法一模一样，只要服务器需要设置Access-Control-Allow-Origin:*
6.document.domain
这种方式适用于主域相同，子域不同，比如http://www.a.com和http://b.a.com
假如这两个域名下各有a.html和b.html,
a.html
document.domain="a.com";
variframe=document.createElement("iframe");
iframe.src="http://b.a.com/b.html";
document.body.appendChild(iframe);
iframe.onload=function(){
console.log(iframe.contentWindow....);//在这里操作b.html里的元素数据
}
b.html
document.domain="a.com";
注意：document.domain需要设置成自身或更高一级的父域，且主域必须相同。