location是javascript裏邊管理地址欄的內置對象,好比location.href就管理頁面的url,用location.href=url就能夠直接將頁面重定向url。javascript
而location.hash則能夠用來獲取或設置頁面的標籤值。好比http://domain/#admin的location.hash="#admin"。利用這個屬性值能夠作一個很是有意義的事情。html
不少人都喜歡收藏網頁,以便於之後的瀏覽。不過對於Ajax頁面來講的話,通常用一個頁面來處理全部的事務,也就是說,若是你瀏覽到一個Ajax頁面裏邊有意思的內容,想將它收藏起來,但是地址只有一個呀,下次你打開這個地址,仍是得像以往同樣不斷地去點擊網頁,找到你鍾情的那個頁面。另外的話,瀏覽器上的「前進」「後退」按鈕也會失效,這於不少習慣了傳統頁面的用戶來講,是一個很大的使用障礙。java
那麼,怎麼用location.hash來解決這兩個問題呢?其實一點也不神祕。瀏覽器
好比,個人做者管理系統,主要功能有三個:普通搜索、高級搜索、後臺管理,我分別給它們分配一個hash值:#search、#advsearch、#admin,在頁面初始化的時候,經過window.location.hash來判斷用戶須要訪問的頁面,而後經過javascript來調整顯示頁面。好比:dom
經過window.location.hash=hash這個語句來調整地址欄的地址,使得瀏覽器裏邊的「前進」、「後退」按鈕能正常使用(實質上欺騙了瀏覽器)。而後再根據hash值的不一樣來顯示不一樣的面板(用戶能夠收藏對應的面板了),這就使得Ajax頁面的瀏覽趨於傳統化了。ui
function getHashStringArgs() {url //取得查詢的hash,並去除開頭的#號spa var hashStrings = (window.location.hash.length > 0 ? window.location.hash.substring(1) : ""),code //保持數據的對象 hashArgs = {},
//取得每一項hash對 items = hashStrings.length > 0 ? hashStrings.split("&") : [], item = null, name = null, value = null, i = 0, len = items.length;
//逐個將每一項添加到hashArgs中 for (i = 0; i < len; i++) { item = items[i].split("="); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (name.length > 0) { hashArgs[name] = value; } } return hashArgs; }
http://127.0.0.1:8080/getHash.html#p=1&keyword=nice&t=2 getHashStringArgs(); //{"p":"1","keyword":"nice","t":"2"} |