几种常见的跨域技术

 

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页面想要的值

你可能感兴趣的:(几种常见的跨域技术)