南强小屋 Design By 杰米
很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码:
复制代码 代码如下:
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扩展中看到此技术身影。
标签:
框架之间,传值
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无js创建数据共享接口——简化框架之间相互传值的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。