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 相关文章推荐
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
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实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python中的choice()方法使用详解
2015/05/15 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python学习必备知识汇总
2017/09/08 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python pickle模块实现对象序列化
2019/11/22 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Pycharm Git 设置方法
2020/09/15 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
高一物理教学反思
2014/01/24 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
邀请书模板
2015/02/02 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python