框架之间相互传值JS解决办法 代码收集

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

1 window.parent.document.getElementById("main")
2 .contentWindow.document.getElementById('input').value =
3 document.getElementById('myIframe')
4 .contentWindow.document.getElementById('s0').value;

 

其实这个问题可以被大大的简化，框架应用中有一个固定不变的窗口叫window.top，如果我们把数据缓存到这个页面，其下所有框架都可以获取到，无论子页面如何变幻。不需要采用Cookie，也不需要采用什么HTML5本地数据库策略，你只需要每个页面引用一个js文件，内容如下：

01 var share = {
02  
03     /**
04      * 跨框架数据共享接口
05      * @param   {String}    存储的数据名
06      * @param   {Any}       将要存储的任意数据(无此项则返回被查询的数据)
07      */
08     data: function (name, value) {
09         var top = window.top,
10             cache = top['_CACHE'] || {};
11         top['_CACHE'] = cache;
12          
13         return value !== undefined ? cache[name] = value : cache[name];
14     },
15      
16     /**
17      * 数据共享删除接口
18      * @param   {String}    删除的数据名
19      */
20     removeData: function (name) {
21         var cache = window.top['_CACHE'];
22         if (cache && cache[name]) delete cache[name];
23     }
24      
25 };

这个寥寥数行的方法可以共享任意类型的数据供各个框架页面读取，它与页面名称、层级毫无关系，就算哪天框架页面层级被修改，你也完全不用担心，它可正常工作。

例如，如我们可以在A页面存入共享数据：

share.data(‘myblog’, ‘http://www.planeart.cn’);
share.data(‘editTitle’, function (val) {
document.title = val;
});

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

alert(‘我的博客地址是： ‘ + share.data(‘myblog’);
var editTitle = share.data(‘editTitle’);
editTitle(‘我已经获取到了数据’);

对，就这么简单！你还可以在artDialog4.0.0 的iframeTools扩展中看到此技术身影。

planeArt.cn原创，原文地址

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/keringing/p/3076446.html