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 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
Javascript动画效果(2)
Oct 11 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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(6) 面向对象
2010/02/16 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python中的fileinput模块的简单实用示例
2015/07/09 Python
python线程、进程和协程详解
2016/07/19 Python
python九九乘法表的实例
2017/09/26 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
2015年小学开学寄语
2015/02/27 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python