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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
如何让vue长列表快速加载
Mar 29 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
也谈 PHP 和 MYSQL
2006/10/09 PHP
用缓存实现静态页面的测试
2006/12/06 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
AngularJS快速入门
2015/04/02 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
python实现超级玛丽游戏
2020/03/18 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
生产班组长岗位职责
2014/01/05 职场文书
前台文员职责范本
2014/03/07 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
js Proxy的原理详解
2021/05/25 Javascript
Java Dubbo框架知识点梳理
2021/06/26 Java/Android