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加解密 脚本解密
Feb 22 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 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的论坛(2)
2006/10/09 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
Position属性之relative用法
2015/12/14 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python文件与目录操作实例详解
2016/02/22 Python
Django内容增加富文本功能的实例
2017/10/17 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python多继承原理与用法示例
2018/08/23 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
一道Delphi上机题
2012/06/04 面试题
企业管理培训感言
2014/01/27 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
搭建Yolov5服务器
2022/04/30 Servers