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编程起步(第二课)
Feb 27 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
js canvas实现五子棋小游戏
Jan 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面向对象public private protected 访问修饰符
2013/06/30 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
简单实现python爬虫功能
2015/12/31 Python
python破解zip加密文件的方法
2018/05/31 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python常用函数与用法示例
2019/07/02 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
美丽的现代设计家具:2Modern
2018/07/26 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
公司企业表扬信
2014/01/11 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
终止合同协议书范本
2016/03/22 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android