js实现跨域访问的三种方法


Posted in Javascript onDecember 09, 2015

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法:
1.基于iframe实现跨域
基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数,代码如下:
页面一: 

<html> 
<head> 
 <script> 
  document.domain = "xx.com"; 
  function aa(){ 
   alert("p"); 
  } 
 </script> 
</head> 
<body> 
  <iframe src="http://localhost:8080/CmsUI/2.html" id="i"> 
   
  </iframe> 
  <script> 
 document.getElementById('i').onload = function(){ 
   var d = document.getElementById('i').contentWindow; 
   d.a(); 
    
 }; 
  </script> 
 </body> 
</html>

页面二: 

<html> 
 <head> 
 <script> 
  document.domain = "xx.com"; 
  function a(){ 
  alert("c"); 
   } 
 </script> 
 </head> 
 <body> 
 </body> 
</html>

这时候父页面就可以调用子页面的a函数,实现js跨域访问
2.基于script标签实现跨域
script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签,代码如下:

var script = document.createElement('script'); 
script.src = "http://aa.xx.com/js/*.js"; 
document.body.appendChild(script);

这样通过动态创建script标签就可以加载其它域的js文件,然后通过本页面就可以调用加载后js文件的函数,这样做的缺陷就是不能加载其它域的文档,只能是js文件,jsonp便是通过这种方式实现的,jsonp通过向其它域传入一个callback参数,通过其他域的后台将callback参数值和json串包装成javascript函数返回,因为是通过script标签发出的请求,浏览器会将返回来的字符串按照javascript进行解析执行,实现了域与域之间的数据传输。
jquery中对jsonp的支持也是基于此方案。
3.后台代理方式
这种方式可以解决所有跨域问题,也就是将后台作为代理,每次对其它域的请求转交给本域的后台,本域的后台通过模拟http请求去访问其它域,再将返回的结果返回给前台,这样做的好处是,无论访问的是文档,还是js文件都可以实现跨域。

以上js实现跨域访问的三种方法分先给大家,大家仔细研究学习,一定会有所收获

Javascript 相关文章推荐
一个基于jquery的图片切换效果
Jul 06 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
详解js的六大数据类型
Dec 27 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
详解js跨域原理以及2种解决方案
Dec 09 #Javascript
深入探讨前端框架react
Dec 09 #Javascript
JavaScript中rem布局在react中的应用
Dec 09 #Javascript
js获取鼠标位置实例详解
Dec 09 #Javascript
JavaScript常用基础知识强化学习
Dec 09 #Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 #Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 #Javascript
You might like
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP常用函数小技巧
2008/09/11 PHP
PHP整合PayPal支付
2015/06/11 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python如何定义带参数的装饰器
2018/03/20 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
服装采购员岗位职责
2014/03/15 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
课外活动实习计划
2015/01/19 职场文书
房屋认购协议书
2015/01/29 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
公司借款担保书
2015/09/22 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
sql server 累计求和实现代码
2022/02/28 SQL Server