第一次寫博客,并且斗膽發表技術類文章,請大家不要見笑,有寫的失敗或雷同的地方請大家扔磚頭敲我吧!
Ajax剛入門不久,便寫了一個Ajax+C#的留言本程式,在實際寫程式中,漸漸發現了Ajax程式許多不成熟的地方,其中比較典型的就是頁面的前進、后退和標簽問題,因為Ajax整個程式是采用無刷新和服務器進行交互,所以導致了大部分瀏覽器的前進后退的功能按鈕失效,當然標簽功能也失去了意義,如果用Ajax研發一個論壇的話,在堆積如山的帖子中必然有經典,不過我們在關閉瀏覽器后,就得重新從頭開始尋找,這樣實在是太痛苦了,所以為了彌補這個缺點,大家各出奇招,目前我向大家描述一下,在我的程式中,怎樣實現這些功能。
我把實現功能的主要程式代碼寫在imitateHistory.js這個文件中
imitateHistory.js
1 //定義一個全局數組
2 var hashList = new Array();
3 //定義一個全局變量,用來作為hash的編號
4 var hashNO = 0;
5 //初始化數組,將初次裝載的頁面的hash添加進數組
6 hashList[0] = window.location.hash.replace(#,);
7 //將Hash填加到數組
8 function addHash(newHash)
9 {
10 //這個判斷是檢測是否在點擊后退按鈕后,再點擊了新的鏈接
11 if(hashNO!=(hashList.length - 1))
12 {
13 //刪除此頁標識以后的數組項
14 hashList.splice(hashNO+1,(hashList.length-(hashNO+1)));
15 }
16 hashList[hashList.length] = newHash;
17 //指向本頁hash的編號
18 hashNO = hashList.length - 1;
19 //將Hash賦值給瀏覽器
20 makeHistory(newHash);
21 //根據瀏覽器的hash,加載數據
22 urlCode();
23 checkLinkButton();
24 }
25 //將Hash賦值給瀏覽器
26 function makeHistory(newHash)
27 {
28 window.location.hash = newHash;
29 }
30 //檢測導航按鈕狀態(按鈕是否可用)
31 function checkLinkButton()
32 {
33 if(hashList.length>1)
34 {
35 if(hashNO>0)
36 {
37 document.getElementById(Back).disabled=;
38 }
39 else
40 {
41 document.getElementById(Back).disabled=disabled;
42 }
43 if(hashNO<(hashList.length-1))
44 {
45 document.getElementById(Next).disabled=;
46 }
47 else
48 {
49 document.getElementById(Next).disabled=disabled;
50 }
51 }
52 }
53 //后退按鈕onclick事件
54 function linkBack()
55 {
56 hashNO = hashNO - 1;
57 makeHistory(hashList[hashNO]);
58 //根據瀏覽器的hash,加載數據
59 urlCode();
60 checkLinkButton();
61 }
62 //前進按鈕onclick事件
63 function linkNext()
64 {
65 hashNO = hashNO + 1;
66 makeHistory(hashList[hashNO]);
67 //根據瀏覽器的hash,加載數據
68 urlCode();
69 checkLinkButton();
70 }
71 //根據瀏覽器的hash,加載數據
72 function urlCode()
73 {
74 var TempHash = window.location.hash;
75 //下面的"home"、"msgList"只是做個標識,能自己定義
76 //根據瀏覽器的hash,加載數據
77 switch(TempHash)
78 {
79 case"":
80 alert(調用你的首頁);
81 break;
82 case"home":
83 alert(調用你的首頁);
84 break;
85 }
86 //如果是留言本的頁碼標簽
87 if (TempHash.substr(1,7)=="msgList")
88 {
89 var page;
90 //取得當前頁碼
91 page = window.location.hash.substr(8,window.location.hash.length);
92 alert(根據頁碼調用你的留言列表);
93 }
94 //當然如果是論壇的帖子標簽,我想也只是對TempHash這個字符串多玩幾個花樣而已,具體我就不介紹了。
95 }
以上主要是用到JS數組的存儲功能,用window.location.hash這個方法來操作瀏覽器的碎片標識。
下面是個測試用的HTML文件,向大家描述一下具體的使用方法。
文件名test.html
test.html
1
2
3
文章就寫到這里了,小弟我是菜鳥,望各位大哥多多指教,如果有看不明白的地方就請大家給我留言吧!
新聞熱點
疑難解答
圖片精選