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 RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 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
多重?l件?合查?(二)
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
php 多文件上传的实现实例
2016/10/23 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
python opencv3实现人脸识别(windows)
2018/05/25 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python 进程的几种创建方式详解
2019/08/29 Python
python英语单词测试小程序代码实例
2019/09/09 Python
flask开启多线程的具体方法
2020/08/02 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
优秀交警事迹材料
2014/01/26 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
mysql sock 文件解析及作用讲解
2022/07/15 MySQL