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 相关文章推荐
js location.replace与location.reload的区别
Sep 08 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
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编程开发“虚拟域名”系统
2006/10/09 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python Django 创建应用过程图示详解
2019/07/29 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
应届生幼儿园求职信
2013/11/12 职场文书
中学门卫岗位职责
2013/12/26 职场文书
美术教师岗位职责
2014/03/18 职场文书
运动会口号大全
2014/06/07 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
Python Django项目和应用的创建详解
2021/11/27 Python
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA