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扩展中看到此技术身影。
相关文章
这篇文章主要为大家详细介绍了微信小程序实现卡片层叠滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
这篇文章主要介绍了Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要为大家详细介绍了小程序实现轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
小程序如果在页面内进行复杂的界面设计,用户进行返回操作会直接离开当前页面,不符合用户预期,下面这篇文章主要给大家介绍了关于微信小程序阻止页面返回(包滑动、自动返回键)的相关资料,需要的朋友可以参考下2023-06-06
本文给大家分享一段js代码关于动态数量的文件上传控件，代码简单易懂，非常不错具有参考借鉴价值，感兴趣的朋友一起看看2016-11-11
列举所有的方式，看看各浏览器的支持差异。方便用js动态设置元素css的代码。需要的朋友可以参考下。2011-08-08
解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这篇文章主要介绍了ES6的解构赋值的实例代码 ,需要的朋友可以参考下2019-05-05
Canvas是HTML5中强大的绘图工具,它让我们能够在网页上创建各种精美的图形和动画效果,本文将向您展示如何使用Canvas制作一个实时时钟,感兴趣的可以了解下2023-08-08
这篇文章主要为大家详细介绍了js正则表达式注册页面表单验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要给大家介绍了如何通过一篇文章快速从零快速上手Rollup的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
最新评论