JS 參數(shù)傳遞的實(shí)際應(yīng)用代碼分析
更新時(shí)間:2009年09月13日 21:27:18 作者:
在項(xiàng)目中,有一個(gè)Ajax加載的區(qū)域,是一個(gè)Div標(biāo)簽,id為msg_box,這個(gè)控制鏈接包含在一個(gè)左側(cè)的導(dǎo)航中,當(dāng)從其他頁(yè)面鏈接到這個(gè)頁(yè)面時(shí),該JS代碼就失效了。
原因很簡(jiǎn)單,在DOM中沒(méi)有id為msg_box的div標(biāo)簽,該怎么解決這個(gè)問(wèn)題呢?
方案:
在所有頁(yè)面公用的頭部文件header.tpl.html中寫(xiě)入:
<script>
function changMenu(index){
if(typeof getElementById("msg_box") == "object"){
//如果存在msg_box對(duì)象 則刷新該頁(yè)的對(duì)象
showMenu(index);
}else{
//如果不存在 則重定向到使用Ajax刷新的頁(yè)面
window.location = "/index.html";
}
}
</script>
但是該項(xiàng)目index.html存在四個(gè)相同性質(zhì)的頁(yè)面,都需要Ajax來(lái)刷新,這樣就存在一個(gè)問(wèn)題,當(dāng)用戶點(diǎn)擊第三個(gè)欄目時(shí),雖然可以回到index.html,但是無(wú)法刷新內(nèi)容到第三個(gè)欄目。這時(shí)有兩種解決方案:
方案1:
第一步:
在所有頁(yè)面公用的頭部文件header.tpl.html中寫(xiě)入:
<script>
function changMenu(index){
if(typeof getElementById("msg_box") == "object"){
//如果存在msg_box對(duì)象 則刷新該頁(yè)的對(duì)象
showMenu(index);
}else{
//如果不存在 則重定向到使用Ajax刷新的頁(yè)面
window.location = "/index.html?type="+index;
}
}
</script>
第二步:
改進(jìn)showMenu函數(shù)
function showMenu(index){
if(typeof getElementById("msg_box") == "object"){
//如果存在msg_box對(duì)象 則刷新該頁(yè)的對(duì)象
......
}else{
url = window.location.href;
reg = /^(.*)\/index\.html\?type\=\d$/gi;
if(reg.test(url)){
//如果符合傳參數(shù)頁(yè)面的url。則獲取該參數(shù)
index = url.substr(url.length - 1);
......
}
}
}
方案2:
調(diào)用JS的cookie功能傳遞參數(shù)
在所有頁(yè)面公用的頭部文件header.tpl.html中寫(xiě)入:
<script>
function changMenu(){
index = getCookie("index");
if(index == null) index = 1;
if(typeof getElementById("msg_box") == "object"){
//如果存在msg_box對(duì)象 則刷新該頁(yè)的對(duì)象
showMenu(index);
}else{
setCookie("index", index);
//如果不存在 則重定向到使用Ajax刷新的頁(yè)面
window.location = "/index.html";
}
}
function setCookie(name, value){
var Then = new Date()
Then.setTime(Then.getTime() + 1*3600000 ) //小時(shí)
document.cookie = name+"="+value+";expires="+Then.toGMTString();
}
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
}
</script>
方案:
在所有頁(yè)面公用的頭部文件header.tpl.html中寫(xiě)入:
復(fù)制代碼 代碼如下:
<script>
function changMenu(index){
if(typeof getElementById("msg_box") == "object"){
//如果存在msg_box對(duì)象 則刷新該頁(yè)的對(duì)象
showMenu(index);
}else{
//如果不存在 則重定向到使用Ajax刷新的頁(yè)面
window.location = "/index.html";
}
}
</script>
但是該項(xiàng)目index.html存在四個(gè)相同性質(zhì)的頁(yè)面,都需要Ajax來(lái)刷新,這樣就存在一個(gè)問(wèn)題,當(dāng)用戶點(diǎn)擊第三個(gè)欄目時(shí),雖然可以回到index.html,但是無(wú)法刷新內(nèi)容到第三個(gè)欄目。這時(shí)有兩種解決方案:
方案1:
第一步:
在所有頁(yè)面公用的頭部文件header.tpl.html中寫(xiě)入:
復(fù)制代碼 代碼如下:
<script>
function changMenu(index){
if(typeof getElementById("msg_box") == "object"){
//如果存在msg_box對(duì)象 則刷新該頁(yè)的對(duì)象
showMenu(index);
}else{
//如果不存在 則重定向到使用Ajax刷新的頁(yè)面
window.location = "/index.html?type="+index;
}
}
</script>
第二步:
改進(jìn)showMenu函數(shù)
復(fù)制代碼 代碼如下:
function showMenu(index){
if(typeof getElementById("msg_box") == "object"){
//如果存在msg_box對(duì)象 則刷新該頁(yè)的對(duì)象
......
}else{
url = window.location.href;
reg = /^(.*)\/index\.html\?type\=\d$/gi;
if(reg.test(url)){
//如果符合傳參數(shù)頁(yè)面的url。則獲取該參數(shù)
index = url.substr(url.length - 1);
......
}
}
}
方案2:
調(diào)用JS的cookie功能傳遞參數(shù)
在所有頁(yè)面公用的頭部文件header.tpl.html中寫(xiě)入:
復(fù)制代碼 代碼如下:
<script>
function changMenu(){
index = getCookie("index");
if(index == null) index = 1;
if(typeof getElementById("msg_box") == "object"){
//如果存在msg_box對(duì)象 則刷新該頁(yè)的對(duì)象
showMenu(index);
}else{
setCookie("index", index);
//如果不存在 則重定向到使用Ajax刷新的頁(yè)面
window.location = "/index.html";
}
}
function setCookie(name, value){
var Then = new Date()
Then.setTime(Then.getTime() + 1*3600000 ) //小時(shí)
document.cookie = name+"="+value+";expires="+Then.toGMTString();
}
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
}
</script>
您可能感興趣的文章:
- js setTimeout 參數(shù)傳遞使用介紹
- Javascript獲取HTML靜態(tài)頁(yè)面參數(shù)傳遞值示例
- JavaScript Base64編碼和解碼,實(shí)現(xiàn)URL參數(shù)傳遞。
- JS的參數(shù)傳遞示例介紹
- 四種參數(shù)傳遞的形式——URL,超鏈接,js,form表單
- Js從頭學(xué)起(基本數(shù)據(jù)類(lèi)型和引用類(lèi)型的參數(shù)傳遞詳細(xì)分析)
- JavaScript函數(shù)的調(diào)用以及參數(shù)傳遞
- javascript自定義函數(shù)參數(shù)傳遞為字符串格式
- javascript實(shí)現(xiàn)html頁(yè)面之間參數(shù)傳遞的四種方法實(shí)例分析
- JavaScript函數(shù)參數(shù)的傳遞方式詳解
相關(guān)文章
js動(dòng)態(tài)拼接正則表達(dá)式的兩種方法
這篇文章主要介紹了js動(dòng)態(tài)拼接正則表達(dá)式的兩種方法,需要的朋友可以參考下2014-03-03
javascript 異步頁(yè)面查詢實(shí)現(xiàn)代碼(asp.net)
異步頁(yè)面查詢,其實(shí)與自動(dòng)完成時(shí)一樣的原理,根據(jù)用戶輸入的關(guān)鍵詞自動(dòng)的與數(shù)據(jù)庫(kù)中的匹配,并顯示出來(lái),提高用戶體驗(yàn),但主要搜索量大的話,增加服務(wù)器開(kāi)銷(xiāo)。2010-05-05
用一段js程序來(lái)實(shí)現(xiàn)動(dòng)畫(huà)功能
用一段js程序來(lái)實(shí)現(xiàn)動(dòng)畫(huà)功能...2007-03-03
微信小程序?qū)崿F(xiàn)運(yùn)動(dòng)步數(shù)排行功能(可刪除)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)運(yùn)動(dòng)步數(shù)排行功能(可刪除),實(shí)現(xiàn)代碼也很簡(jiǎn)單,需要的朋友可以參考下2018-07-07
兩個(gè)比較有用的Javascript工具函數(shù)代碼
下面我的base.js中的extend函數(shù)可以允許用json格式賦值屬性甚至是函數(shù)句柄2010-02-02
關(guān)于JavaScript中URL對(duì)象的一些妙用
avaScript URL() 構(gòu)造函數(shù)返回一個(gè)新創(chuàng)建的 URL 對(duì)象,表示由一組參數(shù)定義的 URL,利用該構(gòu)造函數(shù)可以獲取 RL的查詢、參數(shù)等,下面這篇文章主要給大家介紹了關(guān)于JavaScript URL對(duì)象的一些妙用,需要的朋友可以參考下2021-10-10

