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://www.dhdzp.com'); 
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)文章

js中apply和Math.max()函數(shù)的問(wèn)題及區(qū)別介紹
這篇文章主要介紹了js中apply和Math.max()函數(shù)的問(wèn)題，本文給大家?guī)?lái)兩種答案，每一種答案給大家介紹的非常詳細(xì)，在文章底部給大家提到了js中Math.max.apply和Math.max的區(qū)別，感興趣的朋友一起看看吧
2018-03-03
嘗試在讓script的type屬性等于text/html
我們可以在script片斷中定義一個(gè)被JS調(diào)用的代碼，但代碼又不在頁(yè)面上顯示，這時(shí)，我們可以使用下面的方法;當(dāng)script中的type等于text/html時(shí)我們可以做些什么呢？感興趣的朋友可以了解下啊
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
在一個(gè)瀏覽器里呈現(xiàn)所有瀏覽器測(cè)試結(jié)果的前端測(cè)試工具的思路
對(duì)前端工程師來(lái)說(shuō),跨瀏覽器的兼容性問(wèn)題一直是最頭疼的,測(cè)試一個(gè)小小的東西,就要打開N個(gè)瀏覽器,然后比較來(lái)比較去,記錄個(gè)瀏覽器的數(shù)據(jù),比較不同,實(shí)在是麻煩.
2010-03-03
原生JS實(shí)現(xiàn)分享側(cè)邊欄
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)分享側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
一些不錯(cuò)的JS 自定義函數(shù)
一些不錯(cuò)的JS 自定義函數(shù) ，不少網(wǎng)站都在用，都是一些比較不錯(cuò)的函數(shù)，可以拿來(lái)直接使用。建議學(xué)習(xí)。
2009-08-08
JavaScript中函數(shù)柯里化示例詳解
JavaScript 函數(shù)柯里化是將一個(gè)多參數(shù)的函數(shù)轉(zhuǎn)換為一系列單參數(shù)的函數(shù),每個(gè)單參數(shù)函數(shù)都可以接收一個(gè)參數(shù),并返回一個(gè)新的函數(shù),本文將通過(guò)代碼示例給大家講講JavaScript函數(shù)柯里化的優(yōu)缺點(diǎn),需要的朋友可以參考下
2023-09-09
深入探討javascript函數(shù)式編程
在函數(shù)式編程中，函數(shù)被看做是“一等公民”。JavaScript可以通過(guò)巧妙地函數(shù)組合來(lái)構(gòu)建抽象，通過(guò)內(nèi)嵌函數(shù)的方式，在軟件開發(fā)的過(guò)程中，我們可以把更多的精力放在“函數(shù)要做什么”上，而不用太關(guān)心“函數(shù)如何做”的問(wèn)題。
2015-10-10
JavaScript三種綁定事件方式及相互之間的區(qū)別分析
這篇文章主要介紹了JavaScript三種綁定事件方式及相互之間的區(qū)別,結(jié)合具體實(shí)例形式分析了javascript事件綁定方式的基本實(shí)現(xiàn)方法與相互之間的區(qū)別,需要的朋友可以參考下
2017-01-01
微信小程序分享功能onShareAppMessage(options)用法分析
這篇文章主要介紹了微信小程序分享功能onShareAppMessage(options)用法,結(jié)合具體實(shí)例形式分析了微信小程序分享功能onShareAppMessage(options)具體使用技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-04-04