1:图像ping
图像ping是与服务器进行简单,单项的跨域通信的一种方式
var img=new Image();
img.onload=img.onerror=function(){
alert("done")
}
img.src="http://www.example.com/test?name=sl";
2:jsonp(最实用) jsonp是通过动态<script>元素来使用的
eg
function callbackFunction(){ alert("回滚"); } var script=document.createElement("script"); script.src="http://frergeoip.net.json/?callback=callbackFunction"; document.body.insertBefore(script,document.body.firstChild);
3:使用jquery实现跨域(最简单的)
<script> $.getJSON("http://example.com/data.php?callback=?",function(jsondata){ //回调事件 }); </script>
只不过我们不需要手动的插入script标签以及定义回掉函数。
jquery会自动生成一个全局函数来替换callback=?中的问号,之后获取到数据后又会自动销毁,实际上就是起一个临时代理函数的作用。
$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。
4:通过修改document.domain来跨子域
在页面 http://www.example.com/a.html 中设置document.domain: <iframe src="http://example.com/b.html" id="iframe" onload="test()"></iframe> <script> document.domain="example.com"; //设置成他们的父域 function test(){ document.getElementById("iframe").contentWindow; } </script>
不过如果你想在http://www.example.com/a.html 页面中通过ajax直接请求http://example.com/b.html 页面,即使你设置了相同的document.domain也还是不行的,
所以修改document.domain的方法只适用于不同子域的框架间的交互。
如果你想通过ajax的方法去与不同子域的页面交互,除了使用jsonp的方法外,还可以用一个隐藏的iframe来做一个代理。原理就是让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面,所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的,然后就是通过我们刚刚讲得修改document.domain的方法,让我们能通过js完全控制这个iframe,这样我们就可以让iframe去发送ajax请求,然后收到的数据我们也可以获得了。
5:使用window.name来进行跨域
window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。
在a.html页面
在a.html页面 <script> window.name="我是a页面设置的" </script>
在b.html页面 <script> alert(window.name) //弹出"我是a页面设置的" </script>
使用window.name来获取b页面想要的值