js創(chuàng)建數(shù)據(jù)共享接口——簡化框架之間相互傳值
更新時間：2011年10月23日 19:28:39 作者：
很多框架存在父子關(guān)系，操作起來十分麻煩，很多同學(xué)經(jīng)常出現(xiàn)這樣悲催的代碼
很多框架存在父子關(guān)系，操作起來十分麻煩，很多同學(xué)經(jīng)常出現(xiàn)這樣悲催的代碼：
window.parent.document.getElementById("main")
.contentWindow.document.getElementById('input').value =
document.getElementById('myIframe')
.contentWindow.document.getElementById('s0').value;
其實這個問題可以被大大的簡化，框架應(yīng)用中有一個固定不變的窗口叫window.top，如果我們把數(shù)據(jù)緩存到這個頁面，其下所有框架都可以獲取到，無論子頁面如何變幻。不需要采用Cookie，也不需要采用什么HTML5本地數(shù)據(jù)庫策略，你只需要每個頁面引用一個js文件，內(nèi)容如下：
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ù)供各個框架頁面讀取，它與頁面名稱、層級毫無關(guān)系，就算哪天框架頁面層級被修改，你也完全不用擔(dān)心，它可正常工作。
例如，如我們可以在A頁面存入共享數(shù)據(jù)：
share.data(‘myblog', ‘http://m.fzitv.net');
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擴展中看到此技術(shù)身影。
復(fù)制代碼 代碼如下:
window.parent.document.getElementById("main")
.contentWindow.document.getElementById('input').value =
document.getElementById('myIframe')
.contentWindow.document.getElementById('s0').value;
其實這個問題可以被大大的簡化，框架應(yīng)用中有一個固定不變的窗口叫window.top，如果我們把數(shù)據(jù)緩存到這個頁面，其下所有框架都可以獲取到，無論子頁面如何變幻。不需要采用Cookie，也不需要采用什么HTML5本地數(shù)據(jù)庫策略，你只需要每個頁面引用一個js文件，內(nèi)容如下：
復(fù)制代碼 代碼如下:
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ù)供各個框架頁面讀取，它與頁面名稱、層級毫無關(guān)系，就算哪天框架頁面層級被修改，你也完全不用擔(dān)心，它可正常工作。
例如，如我們可以在A頁面存入共享數(shù)據(jù)：
復(fù)制代碼 代碼如下:
share.data(‘myblog', ‘http://m.fzitv.net');
share.data(‘editTitle', function (val) {
document.title = val;
});
然后某框架頁面任意取A頁面的數(shù)據(jù)
復(fù)制代碼 代碼如下:
alert(‘我的博客地址是： ‘ + share.data(‘myblog');
var editTitle = share.data(‘editTitle');
editTitle(‘我已經(jīng)獲取到了數(shù)據(jù)');
對，就這么簡單！你還可以在artDialog 的iframeTools擴展中看到此技術(shù)身影。
相關(guān)文章
js中apply和Math.max()函數(shù)的問題及區(qū)別介紹
這篇文章主要介紹了js中apply和Math.max()函數(shù)的問題，本文給大家?guī)韮煞N答案，每一種答案給大家介紹的非常詳細，在文章底部給大家提到了js中Math.max.apply和Math.max的區(qū)別，感興趣的朋友一起看看吧2018-03-03
我們可以在script片斷中定義一個被JS調(diào)用的代碼，但代碼又不在頁面上顯示，這時，我們可以使用下面的方法;當(dāng)script中的type等于text/html時我們可以做些什么呢？感興趣的朋友可以了解下啊2013-01-01
ES6入門教程之Iterator與for...of循環(huán)詳解
最近在學(xué)習(xí)ES6，剛剛看到Iterator和for...of循環(huán)這一章，所以想要跟大家略微分享一下，下面這篇文章主要給大家介紹了關(guān)于ES6入門學(xué)習(xí)中Iterator與for...of循環(huán)的相關(guān)資料，不足之處還望大家多多指正，需要的朋友們可以參考學(xué)習(xí)。2017-05-05
在一個瀏覽器里呈現(xiàn)所有瀏覽器測試結(jié)果的前端測試工具的思路
對前端工程師來說,跨瀏覽器的兼容性問題一直是最頭疼的,測試一個小小的東西,就要打開N個瀏覽器,然后比較來比較去,記錄個瀏覽器的數(shù)據(jù),比較不同,實在是麻煩.2010-03-03
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)分享側(cè)邊欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
一些不錯的JS 自定義函數(shù) ，不少網(wǎng)站都在用，都是一些比較不錯的函數(shù)，可以拿來直接使用。建議學(xué)習(xí)。2009-08-08
JavaScript 函數(shù)柯里化是將一個多參數(shù)的函數(shù)轉(zhuǎn)換為一系列單參數(shù)的函數(shù),每個單參數(shù)函數(shù)都可以接收一個參數(shù),并返回一個新的函數(shù),本文將通過代碼示例給大家講講JavaScript函數(shù)柯里化的優(yōu)缺點,需要的朋友可以參考下2023-09-09
在函數(shù)式編程中，函數(shù)被看做是“一等公民”。JavaScript可以通過巧妙地函數(shù)組合來構(gòu)建抽象，通過內(nèi)嵌函數(shù)的方式，在軟件開發(fā)的過程中，我們可以把更多的精力放在“函數(shù)要做什么”上，而不用太關(guān)心“函數(shù)如何做”的問題。2015-10-10
JavaScript三種綁定事件方式及相互之間的區(qū)別分析
這篇文章主要介紹了JavaScript三種綁定事件方式及相互之間的區(qū)別,結(jié)合具體實例形式分析了javascript事件綁定方式的基本實現(xiàn)方法與相互之間的區(qū)別,需要的朋友可以參考下2017-01-01
微信小程序分享功能onShareAppMessage(options)用法分析
這篇文章主要介紹了微信小程序分享功能onShareAppMessage(options)用法,結(jié)合具體實例形式分析了微信小程序分享功能onShareAppMessage(options)具體使用技巧與相關(guān)操作注意事項,需要的朋友可以參考下2019-04-04