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 自定义事件初探
Aug 21 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
详解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
10个实用的PHP正则表达式汇总
2014/10/23 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
Angular实现form自动布局
2016/01/28 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
Highcharts入门之简介
2016/08/02 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python实现整数的二进制循环移位
2019/03/08 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
2014年园林绿化工作总结
2014/12/11 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python