window.location.hash的簡單了解

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來調整顯示頁面。比如：

<code>&lt;!DOCTYPE HTML&gt;</code>

<code>&lt;html lang=</code><code>"en-US"</code><code>&gt;</code>

<code>&lt;head&gt;</code>

<code>    </code><code>&lt;meta charset=</code><code>"UTF-8"</code><code>&gt;</code>

<code>    </code><code>&lt;title&gt;window.location.hash&lt;/title&gt;</code>

<code>    </code><code>&lt;script type=</code><code>"text/javascript"</code> <code>src=</code><code>"http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"</code><code>&gt;&lt;/script&gt;</code>

<code>    </code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>        </code> 

<code>        </code><code>$(document).ready(</code><code>function</code><code>(){</code>

<code>            </code><code>console.log(</code><code>"--- begin...."</code><code>);</code>

<code>            </code><code>var</code> <code>hash = (!window.location.hash) ? </code><code>"#search"</code> <code>: window.location.hash;</code>

<code>            </code><code>window.location.hash = hash;</code>

<code>            </code><code>console.log(</code><code>"hash : "</code> <code>+ hash);</code>

<code>            </code> 

<code>            </code><code>switch</code><code>(hash) {</code>

<code>                </code><code>case</code> <code>"#search"</code><code>:</code>

<code>                    </code><code>console.log(</code><code>"search"</code><code>);</code>

<code>                    </code><code>break</code><code>;</code>

<code>                </code><code>case</code> <code>"#advsearch"</code><code>:</code>

<code>                    </code><code>console.log(</code><code>"advsearch"</code><code>);</code>

<code>                </code><code>case</code> <code>"#admin"</code><code>:</code>

<code>                    </code><code>console.log(</code><code>"#admin"</code><code>);</code>

<code>                </code><code>default</code> <code>: </code>

<code>                    </code><code>console.log(</code><code>"NO#"</code><code>);</code>

<code>            </code><code>}</code>

<code>        </code><code>});</code>

<code>        </code><code>function</code> <code>go(hash) {</code>

<code>            </code><code>//var hash = (!window.location.hash) ? "#search" : window.location.hash;</code>

<code>            </code><code>console.log(</code><code>" go --- hash : "</code> <code>+ hash);</code>

<code>                </code><code>case</code> <code>"search"</code><code>:</code>

<code>                    </code><code>$(</code><code>"h2"</code><code>).html(</code><code>"search"</code><code>);</code>

<code>                </code><code>case</code> <code>"advsearch"</code><code>:</code>

<code>                    </code><code>$(</code><code>"h2"</code><code>).html(</code><code>"advsearch"</code><code>);</code>

<code>                </code><code>case</code> <code>"admin"</code><code>:</code>

<code>                    </code><code>$(</code><code>"h2"</code><code>).html(</code><code>"#admin"</code><code>);</code>

<code>        </code><code>}</code>

<code>        </code><code>//測試：在位址欄輸入：file:///C:/Users/Administrator/Desktop/hash.html#admin</code>

<code>    </code> 

<code>    </code><code>&lt;/script&gt;</code>

<code>&lt;/head&gt;</code>

<code>&lt;body&gt;</code>

<code>    </code><code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"search"</code> <code>id=</code><code>"search"</code> <code>onclick=</code><code>"go('search')"</code><code>/&gt;</code>

<code>    </code><code>&lt;h2&gt;第一部分&lt;/h2&gt;</code>

<code>    </code><code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"advsearch"</code> <code>id=</code><code>"advsearch"</code> <code>onclick=</code><code>"go('advsearch')"</code><code>/&gt;</code>

<code>    </code><code>&lt;br /&gt;&lt;br /&gt;</code>

<code>    </code><code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"admin"</code> <code>id=</code><code>"admin"</code> <code>onclick=</code><code>"go('admin')"</code><code>/&gt;</code>

<code>&lt;/body&gt;</code>

<code>&lt;/html&gt;</code>

     本文轉自韓立偉 51CTO部落格，原文連結：http://blog.51cto.com/hanchaohan/1435734，如需轉載請自行聯系原作者