视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js创建数据共享接口——简化框架之间相互传值_javascript技巧
2020-11-27 21:01:12 责编:小采
文档


很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码:
代码如下:
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', ‘http://www.gxlcms.com');
share.data(‘editTitle', function (val) {
document.title = val;
});

然后某框架页面任意取A页面的数据
代码如下:
alert(‘我的博客地址是: ‘ + share.data(‘myblog');
var editTitle = share.data(‘editTitle');
editTitle(‘我已经获取到了数据');

对,就这么简单!你还可以在artDialog 的iframeTools扩展中看到此技术身影。

下载本文
显示全文
专题