JavaScript iframe数据共享接口实现方法


Posted in Javascript onJanuary 06, 2016

在iframe与父窗口或者与子窗口传递数据是一个麻烦的事情,如果我们能够写一个一劳永逸的接口那就再方便不过了,下面就来简答介绍一下如何实现此功能。原理就是将数据缓存早window.top这个窗口,这样无论子窗口父窗口的层次如何变化,数据总是存在不会变化的。

代码如下:

var share={ 
data:function(name,value){ 
var top=window.top, 
cache=top['_CACHE']||{}; 
top['_CACHE']=cache; 
return value?cache[name]=value:cache[name]; 
}, 
removeData:function(name){ 
var cache=window.top['_CACHE']; 
if(cache&&cache[name]) 
{ 
delete cache[name]; 
} 
} 
}; 
share.data('mayi','https://3water.com');

上面的代码实现了我们的要求,代码比较简单,大家可以自行分析一下,如有任何问题可以跟帖留言。

大家知道JS中Iframe之间是怎么传值的吗?下面给大家简单介绍下。

1.在iframe子页面中获取父页面的元素:

a>window.parent.document这个是获取父页面document中的对象;
b>如果要获取父页面js中的方法:window.parent.xxxx();xxxx()为方法;

2.在父页面中获取iframe子页面中的元素:
a>
var child = document.getElementByIdx_x("mainFrame").contentWindow;//mainFrame这个id是父页面iframe的id
child.document;//获取子页面中的document对象;

Javascript 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 #Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 #Javascript
详解jQuery Mobile自定义标签
Jan 06 #Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 #Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 #Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 #Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 #Javascript
You might like
mysql建立外键
2006/11/25 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
javascript基本类型详解
2014/11/28 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python读大数据txt
2016/03/28 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python实现学生信息管理系统
2020/04/05 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
python实现各种插值法(数值分析)
2019/07/30 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
在vscode中配置python环境过程解析
2019/09/28 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
Python文件操作的面试题
2013/06/22 面试题
学校三八妇女节活动情况总结
2014/03/09 职场文书
摄影展策划方案
2014/06/02 职场文书
家庭困难证明
2014/10/12 职场文书
入股协议书范本
2014/11/01 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
企业团队精神心得体会
2016/01/19 职场文书