location.hash的不一样用法

Posted 前端婴幼儿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了location.hash的不一样用法相关的知识,希望对你有一定的参考价值。

  

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

 

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

 

 

 

  

 

 

以上是关于location.hash的不一样用法的主要内容,如果未能解决你的问题,请参考以下文章

如何从URL获取片段标识符(hash#之后的值)?

window.location.hash的知识点

SPA路由实现的基本原理

前端面试题之什么是hash,以及hashchange事件?

window.location.hash 和 location.hash 有啥区别? [复制]

Chrome:调试谁更改了document.location.hash