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 相关文章推荐
jquery插件之easing使用
Aug 19 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
js 实现碰撞检测的示例
Oct 28 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
TCP/IP的分层模型
2013/10/27 面试题
平面设计的岗位职责
2013/11/08 职场文书
美术国培研修感言
2014/02/12 职场文书
低碳环保标语
2014/06/12 职场文书
世界文化遗产导游词
2015/02/13 职场文书
法院执行局工作总结
2015/08/11 职场文书
清明节随笔
2015/08/15 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书