javascript跨域的几种方法

  • A+
所属分类:JavaScript

此文章学习借鉴了一些其他前端同学的文章,自己做了个实践总结

以下的例子包含的文件均为为 http://www.a.com/a.htmlhttp://www.a.com/c.htmlhttp://www.b.com/b.html,要做的都是从a.html获取b.html里的数据

1.JSONP

jsonp是利用script标签没有跨域限制的特性,通过在srcurl的参数上附加回调函数名字,然后服务器接收回调函数名字并返回一个包含数据的回调函数

2.HTML5的postMessage

假设在a.html里嵌套个<iframe src="http://www.b.com/b.html" frameborder="0"></iframe>,在这两个页面里互相通信

a.html

b.html

这样打开a页面就先弹出 a data,再弹出 b data

3.window.name + iframe

window.name的原理是利用同一个窗口在不同的页面共用一个window.name,这个需要在a.com下建立一个代理文件c.html,使同源后a.html能获取c.htmlwindow.name

a.html

b.html

4.window.location.hash + iframe

b.html将数据以hash值的方式附加到c.htmlurl上,在c.html页面通过location.hash获取数据后传到a.html(这个例子是传到a.htmlhash上,当然也可以传到其他地方)

a.html

b.html

c.html

5.CORS

CORSXMLHttpRequest Level 2 里规定的一种跨域方式。在支持这个方式的浏览器里,javascript的写法和不跨域的ajax写法一模一样,只要服务器需要设置Access-Control-Allow-Origin: *

6.document.domain

这种方式适用于主域相同,子域不同,比如http://www.a.comhttp://b.a.com
假如这两个域名下各有a.htmlb.html,

a.html

b.html

注意:document.domain需要设置成自身或更高一级的父域,且主域必须相同。

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: