js創(chuàng)建數(shù)據(jù)共享接口——簡化框架之間相互傳值
更新時間：2011年10月23日 19:28:39 作者：
很多框架存在父子關系，操作起來十分麻煩，很多同學經(jīng)常出現(xiàn)這樣悲催的代碼
很多框架存在父子關系，操作起來十分麻煩，很多同學經(jīng)常出現(xiàn)這樣悲催的代碼：
window.parent.document.getElementById("main")
.contentWindow.document.getElementById('input').value =
document.getElementById('myIframe')
.contentWindow.document.getElementById('s0').value;
其實這個問題可以被大大的簡化，框架應用中有一個固定不變的窗口叫window.top，如果我們把數(shù)據(jù)緩存到這個頁面，其下所有框架都可以獲取到，無論子頁面如何變幻。不需要采用Cookie，也不需要采用什么HTML5本地數(shù)據(jù)庫策略，你只需要每個頁面引用一個js文件，內容如下：
var share = {
/**
* 跨框架數(shù)據(jù)共享接口
* @param {String} 存儲的數(shù)據(jù)名
* @param {Any} 將要存儲的任意數(shù)據(jù)(無此項則返回被查詢的數(shù)據(jù))
*/
data: function (name, value) {
var top = window.top,
cache = top['_CACHE'] || {};
top['_CACHE'] = cache;
return value ? cache[name] = value : cache[name];
},
/**
* 數(shù)據(jù)共享刪除接口
* @param {String} 刪除的數(shù)據(jù)名
*/
removeData: function (name) {
var cache = window.top['_CACHE'];
if (cache && cache[name]) delete cache[name];
}
};
這個寥寥數(shù)行的方法可以共享任意類型的數(shù)據(jù)供各個框架頁面讀取，它與頁面名稱、層級毫無關系，就算哪天框架頁面層級被修改，你也完全不用擔心，它可正常工作。
例如，如我們可以在A頁面存入共享數(shù)據(jù)：
share.data(‘myblog', ‘http://www.dbjr.com.cn');
share.data(‘editTitle', function (val) {
document.title = val;
});
然后某框架頁面任意取A頁面的數(shù)據(jù)
alert(‘我的博客地址是： ‘ + share.data(‘myblog');
var editTitle = share.data(‘editTitle');
editTitle(‘我已經(jīng)獲取到了數(shù)據(jù)');
對，就這么簡單！你還可以在artDialog 的iframeTools擴展中看到此技術身影。
復制代碼 代碼如下:
window.parent.document.getElementById("main")
.contentWindow.document.getElementById('input').value =
document.getElementById('myIframe')
.contentWindow.document.getElementById('s0').value;
其實這個問題可以被大大的簡化，框架應用中有一個固定不變的窗口叫window.top，如果我們把數(shù)據(jù)緩存到這個頁面，其下所有框架都可以獲取到，無論子頁面如何變幻。不需要采用Cookie，也不需要采用什么HTML5本地數(shù)據(jù)庫策略，你只需要每個頁面引用一個js文件，內容如下：
復制代碼 代碼如下:
var share = {
/**
* 跨框架數(shù)據(jù)共享接口
* @param {String} 存儲的數(shù)據(jù)名
* @param {Any} 將要存儲的任意數(shù)據(jù)(無此項則返回被查詢的數(shù)據(jù))
*/
data: function (name, value) {
var top = window.top,
cache = top['_CACHE'] || {};
top['_CACHE'] = cache;
return value ? cache[name] = value : cache[name];
},
/**
* 數(shù)據(jù)共享刪除接口
* @param {String} 刪除的數(shù)據(jù)名
*/
removeData: function (name) {
var cache = window.top['_CACHE'];
if (cache && cache[name]) delete cache[name];
}
};
這個寥寥數(shù)行的方法可以共享任意類型的數(shù)據(jù)供各個框架頁面讀取，它與頁面名稱、層級毫無關系，就算哪天框架頁面層級被修改，你也完全不用擔心，它可正常工作。
例如，如我們可以在A頁面存入共享數(shù)據(jù)：
復制代碼 代碼如下:
share.data(‘myblog', ‘http://www.dbjr.com.cn');
share.data(‘editTitle', function (val) {
document.title = val;
});
然后某框架頁面任意取A頁面的數(shù)據(jù)
復制代碼 代碼如下:
alert(‘我的博客地址是： ‘ + share.data(‘myblog');
var editTitle = share.data(‘editTitle');
editTitle(‘我已經(jīng)獲取到了數(shù)據(jù)');
對，就這么簡單！你還可以在artDialog 的iframeTools擴展中看到此技術身影。
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)卡片層疊滑動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
Bootstrap Metronic完全響應式管理模板之菜單欄學習筆記
這篇文章主要介紹了Bootstrap Metronic完全響應式管理模板之菜單欄學習筆記，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細介紹了小程序實現(xiàn)輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
小程序如果在頁面內進行復雜的界面設計,用戶進行返回操作會直接離開當前頁面,不符合用戶預期,下面這篇文章主要給大家介紹了關于微信小程序阻止頁面返回(包滑動、自動返回鍵)的相關資料,需要的朋友可以參考下2023-06-06
JavaScript動態(tài)數(shù)量的文件上傳控件
本文給大家分享一段js代碼關于動態(tài)數(shù)量的文件上傳控件，代碼簡單易懂，非常不錯具有參考借鑒價值，感興趣的朋友一起看看2016-11-11
列舉所有的方式，看看各瀏覽器的支持差異。方便用js動態(tài)設置元素css的代碼。需要的朋友可以參考下。2011-08-08
解構賦值允許你使用類似數(shù)組或對象字面量的語法將數(shù)組和對象的屬性賦給各種變量。這篇文章主要介紹了ES6的解構賦值的實例代碼 ,需要的朋友可以參考下2019-05-05
Canvas是HTML5中強大的繪圖工具,它讓我們能夠在網(wǎng)頁上創(chuàng)建各種精美的圖形和動畫效果,本文將向您展示如何使用Canvas制作一個實時時鐘,感興趣的可以了解下2023-08-08
這篇文章主要為大家詳細介紹了js正則表達式注冊頁面表單驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要給大家介紹了如何通過一篇文章快速從零快速上手Rollup的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09