浅谈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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
JavaScript与JQuery框架基础入门教程
Jul 15 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操作xml代码
2010/06/17 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP时间函数使用详解
2019/03/21 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
phpinfo的知识点总结
2019/10/10 PHP
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
基于python实现名片管理系统
2018/11/30 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
python global关键字的用法详解
2019/09/05 Python
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
元旦晚会邀请函
2014/01/27 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
课外活动总结范文
2014/07/09 职场文书
工作年限证明范本
2015/06/15 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android