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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
js canvas实现橡皮擦效果
Dec 20 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
Terran兵种对照表
2020/03/14 星际争霸
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
brook javascript框架介绍
2011/10/10 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python tkinter事件高级用法实例
2018/01/31 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
标准的毕业生自荐信
2014/04/20 职场文书
爬山的活动方案
2014/08/16 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis