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 相关文章推荐
javascript学习网址备忘
May 29 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 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
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
JavaScript的Function详细
2006/11/14 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
python机器学习之贝叶斯分类
2018/03/26 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
神路信息Java面试题目
2013/03/31 面试题
技校生自我鉴定
2013/12/08 职场文书
安全协议书范本
2014/04/21 职场文书
公务员培的训心得体会
2014/09/01 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
建议书的格式及范文
2015/09/14 职场文书