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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
Web应用开发TypeScript使用详解
May 25 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
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
matplotlib绘制动画代码示例
2018/01/02 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
2014年乡镇民政工作总结
2014/12/02 职场文书
陕西导游词
2015/02/04 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python