浅谈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 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
深入理解js中this的用法
May 28 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
vue实现简单loading进度条
Jun 06 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
微信小程序商品详情页底部弹出框
Nov 22 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
77A一级收信机修理记
2021/03/02 无线电
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
vue v-model的用法解析
2020/10/19 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
酒后驾驶检讨书
2014/01/27 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
公司离职证明标准格式
2014/11/18 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
新年晚会开场白
2015/05/29 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server