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 25 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
2013/12/31 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
jquery获取节点名称
2015/04/26 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中Genarator函数用法分析
2015/04/08 Python
python中星号变量的几种特殊用法
2016/09/07 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
护理专业个人求职简历的自我评价
2013/10/13 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
小班秋游活动方案
2014/02/22 职场文书
情人节单身感言
2015/08/03 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
golang语言指针操作
2022/04/14 Golang