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 ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
JS中表单的使用小结
Jan 11 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
js动态生成表格(节点操作)
Jan 12 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 autoload使用方法及步骤详解
2020/09/05 PHP
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
javascript每日必学之继承
2016/02/23 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
JS打印组合功能
2016/08/04 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
js数组去重的hash方法
2016/12/22 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
Vue指令指令大全
2019/02/09 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
python装饰器与递归算法详解
2016/02/18 Python
python安装与使用redis的方法
2016/04/19 Python
python随机数分布random测试
2018/08/27 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
帮一个朋友写的求职信
2014/08/09 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
个人借条范本
2015/05/25 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2016高考感言
2015/08/01 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android