浅谈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获取 type=radio 值的方法
May 09 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 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缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
JS关键字变色实现思路及代码
2013/02/21 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
python多线程下信号处理程序示例
2019/05/31 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
Django分页功能的实现代码详解
2019/07/29 Python
django自定义模板标签过程解析
2019/12/14 Python
python简单的三元一次方程求解实例
2020/04/02 Python
python接口自动化框架实战
2020/12/23 Python
python自动生成证件号的方法示例
2021/01/14 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
this关键字的含义
2015/04/08 面试题
中国好声音华少广告词
2014/03/17 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
学校运动会开幕词
2016/03/03 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
python opencv旋转图片的使用方法
2021/06/04 Python