几种常见的跨域技术
2016-02-04 17:29
351 查看
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
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 页面中通过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页面想要的值
图像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页面想要的值
相关文章推荐
- Spring学习4-面向切面(AOP)之Spring接口方式
- 网上图书商城项目学习笔记-037工具类之BaseServlet及统一中文编码
- 【Java Tutorial中文版 开篇综述】 Oracle(甲骨文)公司Java最新官方教程【译文】
- Python中的时间相关问题
- LeetCode 191 Number of 1 Bits
- 第十八章 并发登录人数控制——《跟我学Shiro》
- Spring学习3—控制反转(IOC)基于Annotation(注解)的依赖注入实现
- ios关于如何获取手机当前的ip
- 学习笔记------数据结构(C语言版)栈和递归 汉诺塔
- eclipse加速之禁用JS、jsp等文件的语法验证,eclipsejs
- SQL Server Export and Import 导出和导入工具 导入EXCEL居然限制为255列
- nyoj264国王的魔镜
- Spring学习3—控制反转(IOC)Spring依赖注入(DI)和控制反转(IOC)
- Spring学习2—Spring容器
- Android的WebView中js与java代码相互调用
- hdu 4289(最小割最大流定理)
- 导出为Excel例子 java
- HUE中通过SQL进行数据分析
- Sublime Text 3使用技巧
- getContextPath、getServletPath、getRequestURI的区别