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 禁止复制网页
Jun 11 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
js查错流程归纳
May 04 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
JavaScript Date对象应用实例分享
2017/10/30 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
js实现导航跟随效果
2018/11/17 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
python开发之thread线程基础实例入门
2015/11/11 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
python字典的常用方法总结
2019/07/31 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
产品质量保证书范本
2015/02/27 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
分享几个简单MySQL优化小妙招
2022/03/31 MySQL