浅谈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 相关文章推荐
JavaScript 学习笔记(六)
Dec 31 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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
Javascript 自定义类型方法小结
2010/03/02 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
vue如何判断dom的class
2018/04/26 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
Python八皇后问题解答过程详解
2019/07/29 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
实习生自荐信范文
2013/11/13 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
法律进学校实施方案
2014/03/15 职场文书
高中运动会广播稿
2014/09/16 职场文书
先进个人材料怎么写
2014/12/30 职场文书
主持人开幕词
2015/01/29 职场文书
预备党员考察意见范文
2015/06/01 职场文书
西安事变观后感
2015/06/12 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
python glom模块的使用简介
2021/04/13 Python
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记