JS创建数据共享接口——简化框架之间相互传值

跨框架数据共享方案

许多前端框架存在父子嵌套关系，导致操作复杂。开发者常遇到类似繁琐的代码片段：

 
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扩展中也可看到该技术的应用实例。