iframe跨域通信封装详解


Posted in Javascript onAugust 11, 2015

iframe跨域通信

查看演示        源码下载

众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容。

用法举例:

需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法。

1. 在top页面中建立方法供内部页面使用

function testFun (text) {

 alert(text);

}

2. 在http://www.demo.org/top.html中嵌入iframe

<iframe width="320" height="240" src="http://www.iframe.com/iframe.html"></iframe>

3. 建立www.demo.org域下建立一个代理页面http://www.demo.org/proxy.html用于跨域通信使用

4. 在http://www.demo.org/proxy.html加入用于代理页面的逻辑

5. 在http://www.iframe.com/iframe.html页面中通过js配置代理页面地址

TopProxyConfig = {url:'http://www.demo.org/proxy.html'};

6. 通过kissy加载通信模块

KISSY.use('topproxy', function(S, TopProxy){

//执行代码

});

7. 在http://www.iframe.com/iframe.html通过TopProxy.call直接访问http://www.demo.org/top.html中的方法,如

KISSY.use('topproxy', function(S, TopProxy){
 TopProxy.call('testFun', '这是一个真实的故事');
});

其中call方法的第一个参数是外部网页的全局方法名,支持“.”,后面参数无限个,均传到目标方法里去。

注:

1. 调用后可能不会立即执行,会等到iframe加载完毕后才触发,如果想预加载可以提前执行一个没用的方法。
2. 如果不设置TopProxyConfig,那么会认为引用iframe和父iframe同域(大域)并直接调用top对象。
3. 在IE678下可能直接调用top中的系统方法会报错,由于系统方法不支持apply。

原理:

A页面嵌日的iframe页面B,其中B想调用A的方法并传递数据,那么可在B中嵌入A页面同域下的一个iframe页面C,C可以通过window.top访问到A的window。那么在B中可以改变C的href的hash向C传递一些信息,然后C再把这些信息传递给A,从而间接达到B给A传递信息的目的

Javascript 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 #Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 #Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 #Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 #Javascript
js限制文本框只能输入中文的方法
Aug 11 #Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 #Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 #Javascript
You might like
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
php mail to 配置详解
2014/01/16 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
javascript globalStorage类代码
2009/06/04 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
python 全局变量的import机制介绍
2017/09/07 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
python实现windows下文件备份脚本
2018/05/27 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Python装饰器用法实例分析
2019/01/14 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
个人简历中的自我评价怎么写
2014/01/26 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
会计岗位职责范本
2014/03/07 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
商品陈列协议书
2014/09/29 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书