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

　　推荐阅读

　　基于jquery的滚动鼠标放大缩小图片效果

今天要出个鼠标滚动放大缩小图片的功能，看似很简单，从网上一搜，出现的都是onmousewheel的例子，全部只支持IE浏览器，结果查出火狐有对应的DOMMouseScroll来处理这个功能，代码如下,并加上注意的注释项： 复制代>>>详细阅读

本文标题：js创建数据共享接口——简化框架之间相互传值

地址：http://www.17bianji.com/kaifa2/JS/24005.html

 1/2    1