js中的几种跨域方法

朱雀 2022-06-11 03:22 263阅读 0赞

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中

b.html中

a.html页面自动跳转到b.html后弹出窗口显示a页面中设置的window.name

# **2. 通过document.domain来跨域** #

浏览器在不同的框架之间能获取到彼此的window对象，但是不能进行js交互操作，也无法获取到window对象的属性和方法，例如无法获取到iframe中的东西。

但是只要把两个页面的document.domain设置成相同的域名，就可以进行js通信了。但是document.domain的设置是有限制的，我们只能把document.domain

设置成自身或者更高一级的父域，

a.html中

b.html页面中

这样我们就能通过js访问到iframe中的各种对象和属性了。

# 3. 通过jsonp跨域 #

**原理：**不同域的页面可以**相互引用js**叫本文文件，jsonp就是利用这个特征实现跨域。

比如，有一个a.html页面，他里面的代码需要利用ajax获取一个不同域的json数据，

因为是当做一个js文件来引入，所以1.php返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的：

<?php $callback=$_GET['callback'];//得到回调函数名 $data='["ls1","customername2"]';//json数据 echo $callback . "(" . $json_data . ")";//输出jsonp格式的数据 ?>

调用dosomething()，则输出2。

如果用jQuery，则可以用下面的代码：

callback后面的？会自动解析为后面的回调函数。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通 ajax方法；跨域 话，就会以异步加载js文件的形式来调用jsonp的回调函数。

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

无论是同源的还是不同源的，都可以使用window.postMessage(message,targetOrigin) 方法来传送数据。这里的message只能为string对象，第二个参数targetOrigin用来限定接受消息的window对象所在的域，若不限定域，可以使用通配符\*。但是该方法不支持IE6和IE7。

示例如下：

b.html

# **5. 利用WebSocket跨域** #

web sockets是一种浏览器的API，他的目标是在一个单独的持久连接上提供全双工、双向通信。（同源策略对web socket不适用）

web sockets原理：在js创建了一个web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器相应后，建立的连接会使用HTTP升级从HTTP协议交换为web socket协议。

该方法只有在支持web socket协议的服务器上才能正常工作。需要在python环境下安装mod\_pywebsocket。