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中沒有id為msg_box的div標(biāo)簽,該怎么解決這個(gè)問題呢?
方案:
在所有頁(yè)面公用的頭部文件header.tpl.html中寫入:
<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來刷新,這樣就存在一個(gè)問題,當(dāng)用戶點(diǎn)擊第三個(gè)欄目時(shí),雖然可以回到index.html,但是無法刷新內(nèi)容到第三個(gè)欄目。這時(shí)有兩種解決方案:
方案1:
第一步:
在所有頁(yè)面公用的頭部文件header.tpl.html中寫入:
<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中寫入:
<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中寫入:
復(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來刷新,這樣就存在一個(gè)問題,當(dāng)用戶點(diǎn)擊第三個(gè)欄目時(shí),雖然可以回到index.html,但是無法刷新內(nèi)容到第三個(gè)欄目。這時(shí)有兩種解決方案:
方案1:
第一步:
在所有頁(yè)面公用的頭部文件header.tpl.html中寫入:
復(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中寫入:
復(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ù)類型和引用類型的參數(shù)傳遞詳細(xì)分析)
- JavaScript函數(shù)的調(diào)用以及參數(shù)傳遞
- javascript自定義函數(shù)參數(shù)傳遞為字符串格式
- javascript實(shí)現(xiàn)html頁(yè)面之間參數(shù)傳遞的四種方法實(shí)例分析
- JavaScript函數(shù)參數(shù)的傳遞方式詳解
相關(guān)文章
微信小程序?qū)崿F(xiàn)登陸注冊(cè)滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登陸注冊(cè)滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05JS實(shí)現(xiàn)獲取漢字首字母拼音、全拼音及混拼音的方法
這篇文章主要介紹了JS實(shí)現(xiàn)獲取漢字首字母拼音、全拼音及混拼音的方法,涉及針對(duì)ChinesePY.js插件的使用及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-11-11微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航標(biāo)簽滾動(dòng)定位到對(duì)應(yīng)位置
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航標(biāo)簽滾動(dòng)定位到對(duì)應(yīng)位置,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11javascript實(shí)現(xiàn)分欄顯示小技巧附圖
考試頁(yè)面可以實(shí)現(xiàn)隱藏左邊的考生信息部分,學(xué)了javascript后也能實(shí)現(xiàn)這個(gè)功能了,下面是實(shí)現(xiàn)思路、代碼及解效果截圖,喜歡的朋友們可以看看2014-10-10