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中的变量声明早于赋值分析
Mar 01 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
Jquery ui css framework
2010/06/28 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
在vscode中配置python环境过程解析
2019/09/28 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
医学类个人求职信范文
2014/02/05 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
行政介绍信范文
2015/05/04 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
家长会感言
2015/08/01 职场文书