location.hash的不一样用法

Posted 2020-10-01 前端婴幼儿

　　

　　除了可以当做锚点，定位到同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值的不同来显示不同的面板（用户可以收藏对应的面板了）。

 

　　其实两种用法都是一个意思，但是这样说，可能会让你很明白。