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 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
javascript 快速排序函数代码
May 30 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
JavaScript 实现轮播图特效的示例
Nov 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时区转换转换函数
2014/01/07 PHP
PHP解决中文乱码
2017/04/28 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
javascript 写类方式之九
2009/07/05 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
python测试驱动开发实例
2014/10/08 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
股权转让协议书范本
2014/04/12 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
学习演讲稿范文
2014/05/10 职场文书
公司贷款承诺书
2014/05/30 职场文书
办护照工作证明
2014/10/01 职场文书
教育见习报告范文
2014/11/03 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
管理失职检讨书
2015/05/05 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
天鹅湖观后感
2015/06/09 职场文书
工作证明格式范文
2015/06/15 职场文书