什么是跨域?当两个域具有相同的协议、相同的端口、相同的host时,那么我们就可以认为它们是相同的域。比如:http://www.example.com/a.html 和 http://www.example.com/b/c.html 就属于相同的域,数据访问可通过 ajax 解决。反之如果不符合上述三个条件中任何一个,我们称之为不同域。比如 http://www.example.com/a.html 和 http://example.com/b.html。由于javascript同源策略的限制,js 语言本身是不具备跨域访问能力的,但是很多时候业务需求,加之程序员们丰富的想象力,出现了各种解决跨域问题的方案。这里就对比较主流的跨域方案做一个简单的汇总。
Image Beacon
这种跨域方案非常简单,利用的是图片可以跨域读取的性质,代码如下:
var img = new Image();
img.src = "http://example.com/data?value=123";
在 js 里执行上述两行代码,就可以向 http://example.com/data 传送数据了,而不用担心是否和 src 里面的地址不同域。数据部分嵌入在URL中,即"value=123" 部分。
这种方案优点在于非常简单,不会带来很多代码的管理问题。缺点在于它只能单向的给服务发送数据,再者由于数据嵌入在 URL 中,而URL的字符长度是受
data" name="C"></iframe>
同样,“#”后面的data为iframe B需要传给A的值。由于A和C之间是同域关系,是可以通过js直接访问的。因此只需要在C中通过JS获取到C的URL中data部分,然后传递给A就行了,实现代码如下:
parent.parent.fn(location.href.split('#')[1]);
注意在执行上面这行代码之前必须在A中声明好全局函数fn,parent.parent 指向的即主页面A中的window对象。
主页面与iframe 之间的跨域通信还可以利用 window.name 这个属性的特殊性来达到。具体就不做说明了,有兴趣的同学可以在网上搜搜。跨域的方式很多,关键是选择一种即能满足本身的业务需求又不影响到代码的可维护性和扩展性。这篇文章算是一个总结,抛砖引玉。前端是个大坑,进去容易,要想明明白白的出来,还得费一番功夫。