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，如需转载请自行联系原作者