快捷導(dǎo)航

window.location.hash 屬性使用說(shuō)明

更新時(shí)間：2010年03月20日 22:43:49 作者：

location是javascript里邊管理地址欄的內(nèi)置對(duì)象，比如location.href就管理頁(yè)面的url，用location.href=url就可以直接將頁(yè)面重定向url。而location.hash則可以用來(lái)獲取或設(shè)置頁(yè)面的標(biāo)簽值。

比如http://domain/#admin的location.hash="#admin"。利用這個(gè)屬性值可以做一個(gè)非常有意義的事情。
很多人都喜歡收藏網(wǎng)頁(yè)，以便于以后的瀏覽。不過(guò)對(duì)于Ajax頁(yè)面來(lái)說(shuō)的話，一般用一個(gè)頁(yè)面來(lái)處理所有的事務(wù)，也就是說(shuō)，如果你瀏覽到一個(gè)Ajax頁(yè)面里邊有意思的內(nèi)容，想將它收藏起來(lái)，可是地址只有一個(gè)呀，下次你打開(kāi)這個(gè)地址，還是得像以往一樣不斷地去點(diǎn)擊網(wǎng)頁(yè)，找到你鐘情的那個(gè)頁(yè)面。另外的話，瀏覽器上的“前進(jìn)”“后退”按鈕也會(huì)失效，這于很多習(xí)慣了傳統(tǒng)頁(yè)面的用戶來(lái)說(shuō)，是一個(gè)很大的使用障礙。
那么，怎么用location.hash來(lái)解決這兩個(gè)問(wèn)題呢？其實(shí)一點(diǎn)也不神秘。
比如，我的作者管理系統(tǒng)，主要功能有三個(gè)：普通搜索、高級(jí)搜索、后臺(tái)管理，我分別給它們分配一個(gè)hash值：#search、#advsearch、#admin，在頁(yè)面初始化的時(shí)候，通過(guò)window.location.hash來(lái)判斷用戶需要訪問(wèn)的頁(yè)面，然后通過(guò)javascript來(lái)調(diào)整顯示頁(yè)面。比如：

復(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": 
} 

通過(guò)window.location.hash=hash這個(gè)語(yǔ)句來(lái)調(diào)整地址欄的地址，使得瀏覽器里邊的“前進(jìn)”、“后退”按鈕能正常使用（實(shí)質(zhì)上欺騙了瀏覽器）。然后再根據(jù)hash值的不同來(lái)顯示不同的面板（用戶可以收藏對(duì)應(yīng)的面板了），這就使得Ajax頁(yè)面的瀏覽趨于傳統(tǒng)化了。

您可能感興趣的文章:

相關(guān)文章

CKEditor擴(kuò)展插件：自動(dòng)排版功能autoformat插件實(shí)現(xiàn)方法詳解
這篇文章主要介紹了CKEditor擴(kuò)展插件：自動(dòng)排版功能autoformat插件實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了CKEditor擴(kuò)展插件實(shí)現(xiàn)自動(dòng)排版功能的autoformat插件具體定義、配置與使用技巧,需要的朋友可以參考下
2020-02-02
實(shí)現(xiàn)兩個(gè)文本框同時(shí)輸入的實(shí)例
下面小編就為大家?guī)?lái)一篇實(shí)現(xiàn)兩個(gè)文本框同時(shí)輸入的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
JS Generator 函數(shù)的含義與用法實(shí)例總結(jié)
這篇文章主要介紹了JS Generator 函數(shù)的含義與用法,結(jié)合實(shí)例形式總結(jié)分析了JS Generator 函數(shù)基本含義、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
JS高階函數(shù)原理與用法實(shí)例分析
這篇文章主要介紹了JS高階函數(shù)原理與用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程、一等函數(shù)、高階函數(shù)等相關(guān)概念、原理及使用技巧,需要的朋友可以參考下
2019-01-01
通過(guò)隱藏iframe實(shí)現(xiàn)文件下載的js方法介紹
本篇文章主要是對(duì)通過(guò)隱藏iframe實(shí)現(xiàn)文件下載的js方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)折疊與展開(kāi)菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)折疊與展開(kāi)菜單效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素樣式的相關(guān)實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-09-09
js實(shí)現(xiàn)右鍵菜單功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)右鍵菜單功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
詳解TypeScript中枚舉的使用
枚舉是 TypeScript 中一個(gè)非常有趣且實(shí)用的特性，它可以讓我們更好地組織和管理代碼，下面就來(lái)和大家聊聊TypeScript中枚舉的具體使用吧
2023-06-06
按下回車鍵指向下一個(gè)位置的一個(gè)函數(shù)代碼
本篇文章主要是對(duì)按下回車鍵指向下一個(gè)位置的一個(gè)函數(shù)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-03-03
js中對(duì)象與對(duì)象創(chuàng)建方法的各種方法
這篇文章主要給大家介紹了關(guān)于js中對(duì)象與對(duì)象創(chuàng)建方法的各種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02