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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
Vue精简版风格概述
Jan 30 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP 编程安全性小结
2010/01/08 PHP
php标签云的实现代码
2012/10/10 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
详解json在php中的应用
2018/09/30 PHP
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
VUE写一个简单的表格实例
2019/08/06 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
小学生读书感言
2014/02/12 职场文书
骨干教师培训方案
2014/05/06 职场文书
财务负责人任命书
2014/06/06 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL