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导致网页中GIF动画停止的解决方法
Nov 02 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
理解Javascript闭包
Nov 01 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 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
收集的php编写大型网站问题集
2007/03/06 PHP
PHP EOT定界符的使用详解
2008/09/30 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
Javascript面向对象编程
2012/03/18 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Move.js入门
2017/02/08 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
python妙用之编码的转换详解
2017/04/21 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
上班上网检讨书
2014/01/29 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
开门红主持词
2014/04/02 职场文书
《故乡》教学反思
2014/04/10 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
食堂管理制度范本
2015/08/04 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
Python词云的正确实现方法实例
2021/05/08 Python