JavaScript 跨域通信的几种方法

由于同源策略(Same Origin Policy)的限制,JavaScript 中两个不同域的页面是无法互相访问数据的,这是出于安全的考虑,所谓同源,是指同一协议、同一域名、同一端口,只有这三者都相同,两个页面才可以互相访问各自的数据。协议是指 httphttpsftp 等,端口平常都是省略的,在 http 中默认均为 80 端口,https443 端口。

注意“同一域名”,是指主域和子域都必须相同。例如 www.a.com 的页面中嵌入了一个 one.a.com 的 iframe,那么就受到同源策略限制。a.com 和 one.a.com 也不视为同一域名。这一类情况比较容易解决,方法就是修改 document.domain

设置 document.domain

只要两个页面的 document.domain 相同,那么 JavaScript 就可以互相访问数据。document.domain 也不是可以随意修改的,只能在同一个主域内,例如 one.a.com 可以设置自己的 document.domaina.com,不能改为 b.comtwo.a.com。并且一旦改为 a.com,就无法再设置成 one.a.com。所以只要在两个页面中都加入下面语句,就可以用 JavaScript 互相访问了:

document.domain = "a.com";

如果是不同主域的两个页面,可以使用的方法有:

JSONP

JSONP 不需要 XHR,原理其实就是创建 script 元素,因为 script 有一个很爽的地方就是不受同源策略的限制,脚本的 src 可以来自任何域名。JSONP 与一般 JSON 请求的区别是,要在 URL 添加一个参数 callback=foo,后面跟上回调函数名,回调函数用来处理响应数据。被请求页面返回的内容形如 foo({ ... }),里面包裹的是 JSON 数据。jQuery 中有一个很方便的函数 jQuery.getJSON
阅读全文 »

flight