window.location.hash 屬性使用說明
更新時間：2010年03月20日 22:43:49 作者：
location是javascript里邊管理地址欄的內(nèi)置對象，比如location.href就管理頁面的url，用location.href=url就可以直接將頁面重定向url。而location.hash則可以用來獲取或設(shè)置頁面的標(biāo)簽值。
比如http://domain/#admin的location.hash="#admin"。利用這個屬性值可以做一個非常有意義的事情。
很多人都喜歡收藏網(wǎng)頁，以便于以后的瀏覽。不過對于Ajax頁面來說的話，一般用一個頁面來處理所有的事務(wù)，也就是說，如果你瀏覽到一個Ajax頁面里邊有意思的內(nèi)容，想將它收藏起來，可是地址只有一個呀，下次你打開這個地址，還是得像以往一樣不斷地去點擊網(wǎng)頁，找到你鐘情的那個頁面。另外的話，瀏覽器上的“前進(jìn)”“后退”按鈕也會失效，這于很多習(xí)慣了傳統(tǒng)頁面的用戶來說，是一個很大的使用障礙。
那么，怎么用location.hash來解決這兩個問題呢？其實一點也不神秘。
比如，我的作者管理系統(tǒng)，主要功能有三個：普通搜索、高級搜索、后臺管理，我分別給它們分配一個hash值：#search、#advsearch、#admin，在頁面初始化的時候，通過window.location.hash來判斷用戶需要訪問的頁面，然后通過javascript來調(diào)整顯示頁面。比如：
var hash;
hash=(!window.location.hash)?"#search":window.location.hash;
window.location.hash=hash;
//調(diào)整地址欄地址，使前進(jìn)、后退按鈕能使用
switch(hash){
case "#search":
selectPanel("pnlSearch"); //顯示普通搜索面板
break;
case "#advsearch":
case "#admin":
}
通過window.location.hash=hash這個語句來調(diào)整地址欄的地址，使得瀏覽器里邊的“前進(jìn)”、“后退”按鈕能正常使用（實質(zhì)上欺騙了瀏覽器）。然后再根據(jù)hash值的不同來顯示不同的面板（用戶可以收藏對應(yīng)的面板了），這就使得Ajax頁面的瀏覽趨于傳統(tǒng)化了。
很多人都喜歡收藏網(wǎng)頁，以便于以后的瀏覽。不過對于Ajax頁面來說的話，一般用一個頁面來處理所有的事務(wù)，也就是說，如果你瀏覽到一個Ajax頁面里邊有意思的內(nèi)容，想將它收藏起來，可是地址只有一個呀，下次你打開這個地址，還是得像以往一樣不斷地去點擊網(wǎng)頁，找到你鐘情的那個頁面。另外的話，瀏覽器上的“前進(jìn)”“后退”按鈕也會失效，這于很多習(xí)慣了傳統(tǒng)頁面的用戶來說，是一個很大的使用障礙。
那么，怎么用location.hash來解決這兩個問題呢？其實一點也不神秘。
比如，我的作者管理系統(tǒng)，主要功能有三個：普通搜索、高級搜索、后臺管理，我分別給它們分配一個hash值：#search、#advsearch、#admin，在頁面初始化的時候，通過window.location.hash來判斷用戶需要訪問的頁面，然后通過javascript來調(diào)整顯示頁面。比如：
復(fù)制代碼 代碼如下:
var hash;
hash=(!window.location.hash)?"#search":window.location.hash;
window.location.hash=hash;
//調(diào)整地址欄地址，使前進(jìn)、后退按鈕能使用
switch(hash){
case "#search":
selectPanel("pnlSearch"); //顯示普通搜索面板
break;
case "#advsearch":
case "#admin":
}
通過window.location.hash=hash這個語句來調(diào)整地址欄的地址，使得瀏覽器里邊的“前進(jìn)”、“后退”按鈕能正常使用（實質(zhì)上欺騙了瀏覽器）。然后再根據(jù)hash值的不同來顯示不同的面板（用戶可以收藏對應(yīng)的面板了），這就使得Ajax頁面的瀏覽趨于傳統(tǒng)化了。
相關(guān)文章
CKEditor擴(kuò)展插件：自動排版功能autoformat插件實現(xiàn)方法詳解
這篇文章主要介紹了CKEditor擴(kuò)展插件：自動排版功能autoformat插件實現(xiàn)方法,結(jié)合實例形式詳細(xì)分析了CKEditor擴(kuò)展插件實現(xiàn)自動排版功能的autoformat插件具體定義、配置與使用技巧,需要的朋友可以參考下2020-02-02
下面小編就為大家?guī)硪黄獙崿F(xiàn)兩個文本框同時輸入的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
JS Generator 函數(shù)的含義與用法實例總結(jié)
這篇文章主要介紹了JS Generator 函數(shù)的含義與用法,結(jié)合實例形式總結(jié)分析了JS Generator 函數(shù)基本含義、用法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JS高階函數(shù)原理與用法,結(jié)合實例形式分析了javascript函數(shù)式編程、一等函數(shù)、高階函數(shù)等相關(guān)概念、原理及使用技巧,需要的朋友可以參考下2019-01-01
本篇文章主要是對通過隱藏iframe實現(xiàn)文件下載的js方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
JS實現(xiàn)鼠標(biāo)滑過折疊與展開菜單效果代碼
這篇文章主要介紹了JS實現(xiàn)鼠標(biāo)滑過折疊與展開菜單效果代碼,涉及JavaScript基于鼠標(biāo)事件動態(tài)改變頁面元素樣式的相關(guān)實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)右鍵菜單功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
枚舉是 TypeScript 中一個非常有趣且實用的特性，它可以讓我們更好地組織和管理代碼，下面就來和大家聊聊TypeScript中枚舉的具體使用吧2023-06-06
本篇文章主要是對按下回車鍵指向下一個位置的一個函數(shù)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要給大家介紹了關(guān)于js中對象與對象創(chuàng)建方法的各種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02