除了可以当做锚点,定位到同name位置,location.hash还有两个用法。
平时开发都会用得到。
一:使js事件在浏览器中产生历史记录。
举个栗子:
我们在JS里面改变了页面的数据、样式等,比如我们首先执行了JS函数A,把页面由白色变成了红色,在执行了JS函数B,把页面由红色变成了黑色,这个时候我想退回到页面为红色的状态,那么该怎么办?如果没有location.hash,我们只有重新载入页面,在去触发执行函数A,因为对于这些事件,浏览器是没有历史记录的,“前进、后退”按钮不能用的,这样显然太麻烦了,对用户不是很友好。有了location.hash我们就有办法了,在函数A和函数B里面加一段代码,location.hash=A这样,执行到该代码后,就相当于触发了喵链接,大家都知道喵链接是不会让页面重新载入的,只是在页面内部定位而已,所以不会造成其他坏的影响,但是细心的你会发现执行了该代码后,“前进、后退”按钮就可以用了,你可以从容的回退到你想要的任何一步操作了,就像你在执行函数时种下了历史记录一样。 onhashchange事件就是当喵链接发生改变的时候触发的。
IE 的部份,IE8 之后才有支持:「onhashchange Event」
Firefox 則是 3.6 之后才有支持:「window.onhashchange」
二:用户使用网址直接访问旧页面。
首先要知道,如果在浏览器地址中输入网址,发送请求,服务器是只能接受地址的,但是不带hash值,举个栗子:
比如在浏览器中输入 :
http://fis.baidu.com/#simple
服务器接受的却是这个:
http://fis.baidu.com
也就是说,在服务器中,是无法请求回来一个带hash值的页面的。
那么这个问题,就要留在客户端来解决,这就使用到了location.hash。
举个栗子:
比如,我们的页面上有三个功能:A、B、C,我们要分别给它们分配一个hash值:#A、#B、#C,在页面初始化的时候,通过window.location.hash来判断用户需要访问的页面,然后通过javascript来调整显示页面。
代码:
var hash; hash=(!window.location.hash)?"#search":window.location.hash; window.location.hash=hash; //调整地址栏地址,使前进、后退按钮能使用 switch(hash){ case "#A": //显示A所代表的面板 break; case "#B": //显示B所代表的面板 break; case "#C": //显示C所代表的面板 break; }
总结一下:
1.通过window.location.hash=hash这个语句来调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用(实质上欺骗了浏览器)。
2.根据hash值的不同来显示不同的面板(用户可以收藏对应的面板了)。
其实两种用法都是一个意思,但是这样说,可能会让你很明白。