手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js创建数据共享接口——简化框架之间相互传值
js创建数据共享接口——简化框架之间相互传值
摘要:很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码:复制代码代码如下:window.parent.document.ge...

很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码:

复制代码 代码如下:

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.jb51.net');

share.data(‘editTitle', function (val) {

document.title = val;

});

然后某框架页面任意取A页面的数据

复制代码 代码如下:

alert(‘我的博客地址是: ‘ + share.data(‘myblog');

var editTitle = share.data(‘editTitle');

editTitle(‘我已经获取到了数据');

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

【js创建数据共享接口——简化框架之间相互传值】相关文章:

javascript实现获取服务器时间

Div+CSS+JS树型菜单,可刷新

JS实现定时自动关闭DIV层提示框的方法

用户输入密码的强度

JavaScript中的italics()方法的使用介绍

jquery插件validation实现验证身份证号等

AspNet中使用JQuery上传插件Uploadify详解

jQuery实现控制文字内容溢出用省略号(…)表示的方法

JavaScript点击按钮后弹出透明浮动层的方法

JQuery控制Radio选中方法分析

精品推荐
分类导航