js创建数据共享接口——简化框架之间相互传值


Posted in Javascript onOctober 23, 2011

很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码:

window.parent.document.getElementById("main") 
.contentWindow.document.getElementById('input').value = 
document.getElementById('myIframe') 
.contentWindow.document.getElementById('s0').value;

其实这个问题可以被大大的简化,框架应用中有一个固定不变的窗口叫window.top,如果我们把数据缓存到这个页面,其下所有框架都可以获取到,无论子页面如何变幻。不需要采用Cookie,也不需要采用什么HTML5本地数据库策略,你只需要每个页面引用一个js文件,内容如下:
var share = { 
/** 
* 跨框架数据共享接口 
* @param {String} 存储的数据名 
* @param {Any} 将要存储的任意数据(无此项则返回被查询的数据) 
*/ 
data: function (name, value) { 
var top = window.top, 
cache = top['_CACHE'] || {}; 
top['_CACHE'] = cache; 
return value ? cache[name] = value : cache[name]; 
}, 
/** 
* 数据共享删除接口 
* @param {String} 删除的数据名 
*/ 
removeData: function (name) { 
var cache = window.top['_CACHE']; 
if (cache && cache[name]) delete cache[name]; 
} 
};

这个寥寥数行的方法可以共享任意类型的数据供各个框架页面读取,它与页面名称、层级毫无关系,就算哪天框架页面层级被修改,你也完全不用担心,它可正常工作。
例如,如我们可以在A页面存入共享数据:
share.data(‘myblog', ‘https://3water.com'); 
share.data(‘editTitle', function (val) { 
document.title = val; 
});

然后某框架页面任意取A页面的数据
alert(‘我的博客地址是: ‘ + share.data(‘myblog'); 
var editTitle = share.data(‘editTitle'); 
editTitle(‘我已经获取到了数据');

对,就这么简单!你还可以在artDialog 的iframeTools扩展中看到此技术身影。
Javascript 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
详解javascript函数的参数
Nov 10 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
vue键盘事件点击事件加native操作
Jul 27 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 #Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 #Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 #Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 #Javascript
js两行代码按指定格式输出日期时间
Oct 21 #Javascript
jQuery中live方法的重复绑定说明
Oct 21 #Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 #Javascript
You might like
为PHP初学者的8点有效建议
2010/11/20 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python用插值法绘制平滑曲线
2021/02/19 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
初一新生军训方案
2014/05/22 职场文书
双拥工作宣传标语
2014/06/26 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
工作推荐信模板
2015/03/25 职场文书
团结主题班会
2015/08/13 职场文书
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
python实现双向链表原理
2022/05/25 Python