js建立數據共享接口——簡化框架之間相互傳值

不少框架存在父子關係，操做起來十分麻煩，不少同窗常常出現這樣悲催的代碼：

複製代碼 代碼以下:

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://doc.codesky.net');
share.data(‘editTitle', function (val) {
document.title = val;
});

而後某框架頁面任意取A頁面的數據

 代碼以下:

alert(‘個人博客地址是： ‘ + share.data(‘myblog');
var editTitle = share.data(‘editTitle');
editTitle(‘我已經獲取到了數據');

對，就這麼簡單！你還能夠在 artDialog 的iframeTools擴展中看到此技術身影。