最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

js创建数据共享接口——简化框架之间相互传值_javascript技巧

来源:动视网 责编:小采 时间:2020-11-27 21:01:12
文档

js创建数据共享接口——简化框架之间相互传值_javascript技巧

js创建数据共享接口——简化框架之间相互传值_javascript技巧:很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码: 代码如下: window.parent.document.getElementById(main) .contentWindow.document.getElementById('input').value = document.getEl
推荐度:
导读js创建数据共享接口——简化框架之间相互传值_javascript技巧:很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码: 代码如下: window.parent.document.getElementById(main) .contentWindow.document.getElementById('input').value = document.getEl


很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码:
代码如下:
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扩展中看到此技术身影。

文档

js创建数据共享接口——简化框架之间相互传值_javascript技巧

js创建数据共享接口——简化框架之间相互传值_javascript技巧:很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码: 代码如下: window.parent.document.getElementById(main) .contentWindow.document.getElementById('input').value = document.getEl
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top