浅谈js中几种实用的跨域方法原理详解


Posted in Javascript onDecember 02, 2016

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。

下表给出了相对http://store.company.com/dir/page.html同源检测的结果:

那么在a.html页面中,我们怎么把data.html页面载入进来呢?显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面,因为我们想要即使a.html页面不跳转也能得到data.html里的数据。答案就是在a.html页面中使用一个隐藏的iframe来充当一个中间人角色,由iframe去获取data.html的数据,然后a.html再去得到iframe获取到的数据。

充当中间人的iframe想要获取到data.html的通过window.name设置的数据,只需要把这个iframe的src设为3water.com/data.html就行了。然后a.html想要得到iframe所获取到的数据,也就是想要得到iframe的window.name的值,还必须把这个iframe的src设成跟a.html页面同一个域才行,不然根据前面讲的同源策略,a.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。

看下a.html页面的代码:

浅谈js中几种实用的跨域方法原理详解

上面的代码只是最简单的原理演示代码,你可以对使用js封装上面的过程,比如动态的创建iframe,动态的注册各种事件等等,当然为了安全,获取完数据后,还可以销毁作为代理的iframe。网上也有很多类似的现成代码,有兴趣的可以去找一下。

通过window.name来进行跨域,就是这样子的。

 4、使用HTML5中新引进的window.postMessage方法来跨域传送数据

window.postMessage(message,targetOrigin)  方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 *  。

需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。

上面所说的向其他window对象发送消息,其实就是指一个页面有几个框架的那种情况,因为每一个框架都有一个window对象。在讨论第二种方法的时候,我们说过,不同域的框架间是可以获取到对方的window对象的,而且也可以使用window.postMessage这个方法。下面看一个简单的示例,有两个页面

浅谈js中几种实用的跨域方法原理详解

浅谈js中几种实用的跨域方法原理详解

我们运行a页面后得到的结果:

浅谈js中几种实用的跨域方法原理详解

我们看到b页面成功的收到了消息。

使用postMessage来跨域传送数据还是比较直观和方便的,但是缺点是IE6、IE7不支持,所以用不用还得根据实际需要来决定。

结语:

除了以上几种方法外,还有flash、在服务器上设置代理页面等跨域方式,这里就不做介绍了。

以上四种方法,可以根据项目的实际情况来进行选择应用,个人认为window.name的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法。

Javascript 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
微信小程序调用后台service教程详解
Nov 06 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 #Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 #Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 #Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 #Javascript
jQuery联动日历的实例解析
Dec 02 #Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 #Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 #Javascript
You might like
PHP 类型转换函数intval
2009/06/20 PHP
PHP中echo和print的区别
2014/08/28 PHP
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
vue实现图片上传功能
2020/05/28 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
Python中如何获取类属性的列表
2016/12/26 Python
微信跳一跳游戏python脚本
2020/04/01 Python
python 调用有道api接口的方法
2019/01/03 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
大学生职业生涯规划书
2014/03/14 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
银行求职自荐信范文
2015/03/04 职场文书
留学推荐信怎么写
2015/03/26 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书