js创建数据共享接口——简化框架之间相互传值
更新时间：2011年10月23日 19:28:39 作者：
很多框架存在父子关系，操作起来十分麻烦，很多同学经常出现这样悲催的代码
很多框架存在父子关系，操作起来十分麻烦，很多同学经常出现这样悲催的代码：
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://www.jb51.net');
share.data(‘editTitle', function (val) {
document.title = val;
});
然后某框架页面任意取A页面的数据
alert(‘我的博客地址是： ‘ + share.data(‘myblog');
var editTitle = share.data(‘editTitle');
editTitle(‘我已经获取到了数据');
对，就这么简单！你还可以在artDialog 的iframeTools扩展中看到此技术身影。
复制代码 代码如下:
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://www.jb51.net');
share.data(‘editTitle', function (val) {
document.title = val;
});
然后某框架页面任意取A页面的数据
复制代码 代码如下:
alert(‘我的博客地址是： ‘ + share.data(‘myblog');
var editTitle = share.data(‘editTitle');
editTitle(‘我已经获取到了数据');
对，就这么简单！你还可以在artDialog 的iframeTools扩展中看到此技术身影。
相关文章
这篇文章主要介绍了js中apply和Math.max()函数的问题，本文给大家带来两种答案，每一种答案给大家介绍的非常详细，在文章底部给大家提到了js中Math.max.apply和Math.max的区别，感兴趣的朋友一起看看吧2018-03-03
我们可以在script片断中定义一个被JS调用的代码，但代码又不在页面上显示，这时，我们可以使用下面的方法;当script中的type等于text/html时我们可以做些什么呢？感兴趣的朋友可以了解下啊2013-01-01
最近在学习ES6，刚刚看到Iterator和for...of循环这一章，所以想要跟大家略微分享一下，下面这篇文章主要给大家介绍了关于ES6入门学习中Iterator与for...of循环的相关资料，不足之处还望大家多多指正，需要的朋友们可以参考学习。2017-05-05
对前端工程师来说,跨浏览器的兼容性问题一直是最头疼的,测试一个小小的东西,就要打开N个浏览器,然后比较来比较去,记录个浏览器的数据,比较不同,实在是麻烦.2010-03-03
这篇文章主要为大家详细介绍了原生JS实现分享侧边栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
一些不错的JS 自定义函数 ，不少网站都在用，都是一些比较不错的函数，可以拿来直接使用。建议学习。2009-08-08
JavaScript 函数柯里化是将一个多参数的函数转换为一系列单参数的函数,每个单参数函数都可以接收一个参数,并返回一个新的函数,本文将通过代码示例给大家讲讲JavaScript函数柯里化的优缺点,需要的朋友可以参考下2023-09-09
在函数式编程中，函数被看做是“一等公民”。JavaScript可以通过巧妙地函数组合来构建抽象，通过内嵌函数的方式，在软件开发的过程中，我们可以把更多的精力放在“函数要做什么”上，而不用太关心“函数如何做”的问题。2015-10-10
这篇文章主要介绍了JavaScript三种绑定事件方式及相互之间的区别,结合具体实例形式分析了javascript事件绑定方式的基本实现方法与相互之间的区别,需要的朋友可以参考下2017-01-01
微信小程序分享功能onShareAppMessage(options)用法分析
这篇文章主要介绍了微信小程序分享功能onShareAppMessage(options)用法,结合具体实例形式分析了微信小程序分享功能onShareAppMessage(options)具体使用技巧与相关操作注意事项,需要的朋友可以参考下2019-04-04
最新评论