js hash

飄飄發表於2010-10-28
JS

location是javascript裡邊管理位址列的內建物件，比如location.href就管理頁面的url，用location.href=url就可以直接將頁面重定向url。而location.hash則可以用來獲取或設定頁面的標籤值。比如http://domain/#admin的location.hash="#admin"。利用這個屬性值可以做一個非常有意義的事情。

很多人都喜歡收藏網頁，以便於以後的瀏覽。不過對於Ajax頁面來說的話，一般用一個頁面來處理所有的事務，也就是說，如果你瀏覽到一個Ajax頁面裡邊有意思的內容，想將它收藏起來，可是地址只有一個呀，下次你開啟這個地址，還是得像以往一樣不斷地去點選網頁，找到你鍾情的那個頁面。另外的話，瀏覽器上的“前進”“後退”按鈕也會失效，這於很多習慣了傳統頁面的使用者來說，是一個很大的使用障礙。

那麼，怎麼用location.hash來解決這兩個問題呢？其實一點也不神祕。

比如，我的作者管理系統，主要功能有三個：普通搜尋、高階搜尋、後臺管理，我分別給它們分配一個hash值：#search、#advsearch、#admin，在頁面初始化的時候，通過window.location.hash來判斷使用者需要訪問的頁面，然後通過javascript來調整顯示頁面。比如：

var hash;
hash=(!window.location.hash)?"#search":window.location.hash;
window.location.hash=hash;
  //調整位址列地址，使前進、後退按鈕能使用
switch(hash){  
case "#search": 
    selectPanel("pnlSearch");   //顯示普通搜尋皮膚 
    break;   
case "#advsearch":   
  ...   
case "#admin": 
    ...
}

通過window.location.hash=hash這個語句來調整位址列的地址，使得瀏覽器裡邊的“前進”、“後退”按鈕能正常使用（實質上欺騙了瀏覽器）。然後再根據hash值的不同來顯示不同的皮膚（使用者可以收藏對應的皮膚了），這就使得Ajax頁面的瀏覽趨於傳統化了。

相關文章