URL中的hash的学习

突然发现现在的框架都有个什么route,好像都在利用URL的警号做一些文章,于是搜了一些文章学习下。

一、井号的含义

#代表网页中的一个位置,后面的值就是位置的表示符,比如:http://www.example.com/index.html#print中的print代表网页中的一个位置,浏览器会自动滚到该位置。

在网页中指定位置有两种方法:

  • 使用锚点,e:<a name="print"></a>
  • 使用id,e:<div id="print"></div>

二、请求是不包括#部分的

三、改变#内容不会触发页面重载

四、改变#会改变浏览器的访问历史

每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置。

这对于ajax应用程序特别有用,可以用不同的#值,表示不同的访问状态,然后向用户给出可以访问某个状态的链接。

值得注意的是,上述规则对IE 6和IE 7不成立,它们不会因为#的改变而增加历史记录。

五、window.location.hash读取#值

window.location.hash这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。

六、onhashchange事件

这是一个HTML 5新增的事件,当#值发生变化时,就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。

它的使用方法有三种:

1
2
3
4
5
window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange", func, false);

参考文章: