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版本A*寻路算法
Dec 22 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
js实现数组转换成json
Jun 26 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 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通过curl模拟登陆DZ论坛
2015/05/11 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
JSONP跨域请求
2017/03/02 Javascript
详解Vue方法与事件
2017/03/09 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
信息管理专业推荐信
2013/10/29 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
保安队长职务说明书
2014/02/23 职场文书
冬季安全检查方案
2014/05/23 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
感恩老师主题班会
2015/08/12 职场文书
怎么用Python识别手势数字
2021/06/07 Python