js中的几种跨域方法

js跨域指的是通过js在不同域之间进行数据传输或通讯，例如ajax通信技术，或者通过js获取页面中iframe的数据。只要有任意一个不同，则协议、域名、端口中有任意一个不同，则彼此成为不同的域。

所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：

1）http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

2）http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
3）http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
4）http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
5）http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

1. 通过window.name来跨域——这个方法最方便

同一个窗口在其生命周期内都共享一个window.name，该窗口的每个页面都能获取并修改window.name属性，页面刷新或者发生页面跳转并不会直接引起window.name的改变。
例如：
a.html中
<script>
window.name="父页面的值";
setTimeout(function(){
window.location="b.html";
},1000);
</script>b.html中
<script>
alert(window.name);//输出“父页面的值”;
</script>a.html页面自动跳转到b.html后弹出窗口显示a页面中设置的window.name

2. 通过document.domain来跨域

浏览器在不同的框架之间能获取到彼此的window对象，但是不能进行js交互操作，也无法获取到window对象的属性和方法，例如无法获取到iframe中的东西。
但是只要把两个页面的document.domain设置成相同的域名，就可以进行js通信了。但是document.domain的设置是有限制的，我们只能把document.domain
设置成自身或者更高一级的父域，
a.html中
<iframe src="http://example.com/b.html" id='ifram' onload="test()"></iframe>
<script>
document.domain="example.com";
function test(){
alert(document.getElementById('iframe').contentWindow);
</script>b.html页面中
<script>
document.domain="example.com";
</script>这样我们就能通过js访问到iframe中的各种对象和属性了。

3. 通过jsonp跨域

原理：不同域的页面可以相互引用js叫本文文件，jsonp就是利用这个特征实现跨域。
比如，有一个a.html页面，他里面的代码需要利用ajax获取一个不同域的json数据，
<script>
function callbackfunction(){
alert(jsondata.length);//处理json数据
}
</script>
<script src="1.php?callback=callbackunction"></script>因为是当做一个js文件来引入，所以1.php返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的：
<?php
$callback=$_GET['callback'];//得到回调函数名
$data='["ls1","customername2"]';//json数据
echo $callback . "(" . $json_data . ")";//输出jsonp格式的数据

?>调用dosomething()，则输出2。
如果用jQuery，则可以用下面的代码：
<script>
$.getJSON('1.php?callback=?',function(data){
alert(data.length);
}
</script>callback后面的？会自动解析为后面的回调函数。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通 ajax方法；跨域 话，就会以异步加载js文件的形式来调用jsonp的回调函数。

4. 使用HTML5中的window.postMessage方法来跨域传送数据

无论是同源的还是不同源的，都可以使用window.postMessage(message,targetOrigin) 方法来传送数据。这里的message只能为string对象，第二个参数targetOrigin用来限定接受消息的window对象所在的域，若不限定域，可以使用通配符*。但是该方法不支持IE6和IE7。
示例如下：
<script>
function onLoad(){
var iframe=document.getElementById('iframe');
var win=iframe.contentWindow;
win.postMessage('页面a传来消息','*');
</script>
<iframe id='iframe' src="b.html" onload="onLoad()"></iframe>b.html
<script>
window.onmessage=function(e){
e=e | event;//获取事件对象
alert(e.data);//通过data属性得到传来的消息
}
</script>

5. 利用WebSocket跨域

web sockets是一种浏览器的API，他的目标是在一个单独的持久连接上提供全双工、双向通信。（同源策略对web socket不适用）
web sockets原理：在js创建了一个web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器相应后，建立的连接会使用HTTP升级从HTTP协议交换为web socket协议。
该方法只有在支持web socket协议的服务器上才能正常工作。需要在python环境下安装mod_pywebsocket。
<script>
var ws=new WebSocket("ws://localhost/test.html");//ws:http; wss:https
ws.send("hello world"):
ws.onmessage=function(event){
var data=event.data;
}
</script>