很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码:
复制代码 代码如下:
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扩展中看到此技术身影。
标签:
框架之间,传值
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“js创建数据共享接口——简化框架之间相互传值”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。