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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
jquery.ui.draggable中文文档
Nov 24 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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 fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
javascript date格式化示例
2013/09/25 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python内置函数dir详解
2015/04/14 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
基于Python实现天天酷跑功能
2021/01/06 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
自荐信格式的六要素
2013/09/21 职场文书
自荐信写法介绍
2014/01/25 职场文书
高三体育教学反思
2014/01/29 职场文书
2014年审计工作总结
2014/11/17 职场文书
贷款收入证明格式
2015/06/24 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Redis 哨兵集群的实现
2021/06/18 Redis