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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
小程序云开发之用户注册登录
May 18 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
代码生成器 document.write()
2007/04/15 Javascript
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
Ajax基础知识详解
2017/02/17 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
Vue面试题及Vue知识点整理
2018/10/07 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
班会关于环保演讲稿
2013/12/29 职场文书
差生评语大全
2014/05/04 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL