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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
JavaScript运行原理分析
Feb 09 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
Vue设置长时间未操作登录自动到期返回登录页
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
windows下apache搭建php开发环境
2015/08/27 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
django输出html内容的实例
2018/05/27 Python
python实现学员管理系统
2019/02/26 Python
python实现支付宝转账接口
2019/05/07 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
致短跑运动员广播稿
2014/01/09 职场文书
医院实习介绍信
2014/01/12 职场文书
特此通知格式
2015/04/27 职场文书
创业计划书之面包店
2019/09/17 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
Oracle使用别名的好处
2022/04/19 Oracle
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android