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 相关文章推荐
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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
zf框架的Filter过滤器使用示例
2014/03/13 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
js中的闭包实例展示
2018/11/01 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
python避免死锁方法实例分析
2015/06/04 Python
python web基础之加载静态文件实例
2018/03/20 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
python实现局域网内实时通信代码
2019/12/22 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
animation和transition的区别
2020/10/12 HTML / CSS
html+css3实现的登录界面
2020/12/09 HTML / CSS
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
工会换届选举方案
2014/05/21 职场文书
电教室标语
2014/06/20 职场文书
老干部工作先进事迹
2014/08/17 职场文书
小学运动会演讲稿
2014/08/25 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis