快捷導(dǎo)航

js創(chuàng)建數(shù)據(jù)共享接口——簡(jiǎn)化框架之間相互傳值

更新時(shí)間：2011年10月23日 19:28:39 作者：

很多框架存在父子關(guān)系，操作起來(lái)十分麻煩，很多同學(xué)經(jīng)常出現(xiàn)這樣悲催的代碼

很多框架存在父子關(guān)系，操作起來(lái)十分麻煩，很多同學(xué)經(jīng)常出現(xiàn)這樣悲催的代碼：

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

其實(shí)這個(gè)問(wèn)題可以被大大的簡(jiǎn)化，框架應(yīng)用中有一個(gè)固定不變的窗口叫window.top，如果我們把數(shù)據(jù)緩存到這個(gè)頁(yè)面，其下所有框架都可以獲取到，無(wú)論子頁(yè)面如何變幻。不需要采用Cookie，也不需要采用什么HTML5本地?cái)?shù)據(jù)庫(kù)策略，你只需要每個(gè)頁(yè)面引用一個(gè)js文件，內(nèi)容如下：

復(fù)制代碼代碼如下:

 
var share = { 
/** 
* 跨框架數(shù)據(jù)共享接口 
* @param {String} 存儲(chǔ)的數(shù)據(jù)名 
* @param {Any} 將要存儲(chǔ)的任意數(shù)據(jù)(無(wú)此項(xiàng)則返回被查詢的數(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]; 
} 
}; 

這個(gè)寥寥數(shù)行的方法可以共享任意類型的數(shù)據(jù)供各個(gè)框架頁(yè)面讀取，它與頁(yè)面名稱、層級(jí)毫無(wú)關(guān)系，就算哪天框架頁(yè)面層級(jí)被修改，你也完全不用擔(dān)心，它可正常工作。
例如，如我們可以在A頁(yè)面存入共享數(shù)據(jù)：

復(fù)制代碼代碼如下:

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

然后某框架頁(yè)面任意取A頁(yè)面的數(shù)據(jù)

復(fù)制代碼代碼如下:

 
alert(‘我的博客地址是： ‘ + share.data(‘myblog'); 
var editTitle = share.data(‘editTitle'); 
editTitle(‘我已經(jīng)獲取到了數(shù)據(jù)'); 

對(duì)，就這么簡(jiǎn)單！你還可以在artDialog 的iframeTools擴(kuò)展中看到此技術(shù)身影。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)卡片層疊滑動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)卡片層疊滑動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記
這篇文章主要介紹了Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下
2016-07-07
小程序?qū)崿F(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
微信小程序阻止頁(yè)面返回實(shí)例詳解(包滑動(dòng)、自動(dòng)返回鍵)
小程序如果在頁(yè)面內(nèi)進(jìn)行復(fù)雜的界面設(shè)計(jì),用戶進(jìn)行返回操作會(huì)直接離開(kāi)當(dāng)前頁(yè)面,不符合用戶預(yù)期,下面這篇文章主要給大家介紹了關(guān)于微信小程序阻止頁(yè)面返回(包滑動(dòng)、自動(dòng)返回鍵)的相關(guān)資料,需要的朋友可以參考下
2023-06-06
JavaScript動(dòng)態(tài)數(shù)量的文件上傳控件
本文給大家分享一段js代碼關(guān)于動(dòng)態(tài)數(shù)量的文件上傳控件，代碼簡(jiǎn)單易懂，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看
2016-11-11
js中設(shè)置元素class的三種方法小結(jié)
列舉所有的方式，看看各瀏覽器的支持差異。方便用js動(dòng)態(tài)設(shè)置元素css的代碼。需要的朋友可以參考下。
2011-08-08
ES6的解構(gòu)賦值實(shí)例詳解
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z(yǔ)法將數(shù)組和對(duì)象的屬性賦給各種變量。這篇文章主要介紹了ES6的解構(gòu)賦值的實(shí)例代碼 ,需要的朋友可以參考下
2019-05-05
js利用canvas制作一個(gè)實(shí)時(shí)時(shí)鐘
Canvas是HTML5中強(qiáng)大的繪圖工具,它讓我們能夠在網(wǎng)頁(yè)上創(chuàng)建各種精美的圖形和動(dòng)畫(huà)效果,本文將向您展示如何使用Canvas制作一個(gè)實(shí)時(shí)時(shí)鐘,感興趣的可以了解下
2023-08-08
js正則表達(dá)式注冊(cè)頁(yè)面表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js正則表達(dá)式注冊(cè)頁(yè)面表單驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
一篇文章帶你從零快速上手Rollup
這篇文章主要給大家介紹了如何通過(guò)一篇文章快速?gòu)牧憧焖偕鲜諶ollup的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09