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 form 验证函数 弹出对话框形式
Jun 23 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
详解JavaScript数据类型和判断方法
Sep 04 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下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
基于Python实现粒子滤波效果
2020/12/01 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
销售顾问工作计划书
2014/09/15 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
2014年销售员工作总结
2014/12/01 职场文书
党员剖析材料范文
2014/12/18 职场文书
优秀团员事迹材料
2014/12/25 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
胡桃夹子观后感
2015/06/11 职场文书
地震捐款简报
2015/07/21 职场文书
患者身份识别制度
2015/08/06 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL