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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
详解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
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
python web基础之加载静态文件实例
2018/03/20 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python各类经纬度转换的实例代码
2019/08/08 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
python标准库OS模块详解
2020/03/10 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
监守自盗观后感
2015/06/10 职场文书
环境卫生标语
2015/08/03 职场文书
同学聚会开幕词
2019/04/02 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
springcloud之Feign超时问题的解决
2021/06/24 Java/Android