JS 如何跨域的几种实用方法和原理
2017-02-06| 程成| 1050| 0| jQuery/JS


自己搜索,并且总结了几种实用的js跨域方法以及其原理

1、jsonp跨域

2、document.domain

3、window.name

4、h5新方法window.postMessage


1、jsonp

 

在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。

 

 


 


服务器端php文件返回必须是一个可执行的js文件,所以data.php代码可能是这样的



 


输出结果dosomething([a,b,c])

 

 




getJson就是这个原理,data.php执行完毕会自动回调后面的方法,相当于省略了中间一个tmp方法

 

 

2、document.domain


由于浏览器的同源策略,无法ajax获取不同源中的文档。浏览器中不同框架无法进行js交互操作,但是不同框架可以获取window对象,但是无法获取window对象的属性和方法,你可以获取几乎无用的window对象。

这个时候我们只用把两个页面的document.domain设置成相同的域名就可以了。(document.domain只能设置成自身或者比自身更高一级的父域)

document.getElementById('iframe').contentWindow这样获取另一个页面的属性和方法

 

 

 

3、使用window.name

 

window.name是在一个窗口持续存在的,不会因新页面的载入二进行重置。

比如a页面设置了window.name='这是a页面的name',b页面alert(window.name),从a跳到b,可以弹出a页面设置的值。

其实不用跳转,通过iframe的引入也可以获取a页面的window.name,比如这样

 

 





4、通过h5的window.postMessage

 

可以通过这个方法向其他window对象发送数据,不用管是不是存在于同一个域。该方法第一个参数为要发送的数据,必须是字符串,第二个参数是接受消息的window所在的域名,如果不限定,可以用*通配符。

 

 

发送页面




以上就是我总结的js几种实用的跨域方法和原理



















 

×
作者:程成
QQ:492245711