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 相关文章推荐
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
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文件操作的详细诠释
2013/06/21 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
URL地址中的#符号使用说明
2011/02/12 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
jsonp原理及使用
2013/10/28 Javascript
js实现文字滚动效果
2016/03/03 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
Python 字典(Dictionary)操作详解
2014/03/11 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
Python collections模块的使用方法
2020/10/09 Python
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
个人查摆剖析材料
2014/02/04 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
入党积极分子群众意见
2015/06/01 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS