首页 > 网络编程 > JavaScript > javascript技巧 > hash特点hashchange事件介绍

hash特点、hashchange事件介绍及其常见应用场景

2023-11-12 08:55:53 作者：古兰精

浅析hash特点、hashchange事件介绍及其常见应用场景（不同hash对应不同事件处理、移动端大图展示状态后退页面问题、原生轻应用头部后退问题、移动端自带返回按钮二次确认问题）,hashchange和popstate事件触发条件

一、hash、hashchange 事件介绍

1、hash 是什么？

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分，一般有当前页面中 href 中 # 地址触发。hash 即 URL 中 # 字符后面的部分，具有如下特点：

使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到 id（或name）与hash值一样的元素的位置；
hash 还有另一个特点，它的改变不会导致页面重新加载；
hash 值浏览器是不会随请求发送到服务器端的；
通过 window.location.hash 属性获取和设置 hash 值。

window.location.hash 值的变化会直接反应到浏览器地址栏（#后面的部分会发生变化），同时，浏览器地址栏 hash 值的变化也会触发 window.location.hash 值的变化，从而触发 onhashchange 事件。

2、hashchange 事件

当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号）
hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性

window.addEventListener('hashchange', function(e) {
    console.log(e.oldURL);
    console.log(e.newURL)
}, false);

二、实际应用场景

1、hash 的简单应用

页面中有 3 个不同的a标签，当点击不同的a时给filterText赋予不同的值，可利用window.onhashchange事件来实现，这样避免了给每个a标签分别注册事件

<a href="#/" rel="external nofollow" ></a>
<a href="#/active" rel="external nofollow" ></a>
<a href="#/completed" rel="external nofollow" ></a>

//此函数监听hash值的变化，来给判断哪个按钮被点击，从而给filterText赋值
let filterText = 'all'
window.onhashchange = function () {
    switch(window.location.hash) {
      case '#/':
        filterText = 'all'
        break
      case '#/active':
        filterText = 'active'
        break
      case '#/completed':
       filterText = 'completed'
    }
}

2、hashchange 事件的应用

移动端里有这样一个功能，点击小图时在当前页面上展示大图，这应该是很常见的场景：

CSS和Javascript具体怎么实现的就不再啰嗦了，这里要考虑的问题是：当进入大图展示状态时，如何返回？这是手机的页面，对于用惯APP的用户来说，他很可能会点击左下角的返回键。然而这是个浏览器，返回就意味着回到上一页而不是退出大图展示状态。

下面讲解一下如何利用 hashchange 解决这个问题。我们需要了解的是：当URL的hash改变时，虽然页面不会重新加载，但仍然会被记录到浏览器的历史记录中。

也就是说，如果依次访问 a.html、b.html、b.html#abc，然后点击后退，此时会返回 b.html 而不是 a.html。而且，由于hash改变了，所以会触发hashchange事件。这样一来，只要在进入大图展示状态时加上一个特定的 hash，点击返回键触发 hashchange 时退出此状态即可。代码也很简单：

// 假设大图展示状态的hash为imgSlider
window.addEventListener('hashchange', function(e) {
  var re = /#imgSlider$/;
  if ( re.test(e.oldURL) && !re.test(e.newURL) ) {
    // 假设imgSlider为大图展示组件对象
    imgSlider.hide();
  }
}, false);

3、hashChange 巧妙监听原生轻应用跳转

遇到一个问题，轻应用中的头部是原生的，当我们的H5页面中有包含类似日历、时间、弹出选择等控件，这个时候的控件背景覆盖区域就在头部之下了，这意味着点击头部的时候，这些控件不会隐藏消失，例如返回上一个页面的时候，日历等弹出控件就依然坚挺不回家，解决办法就是利用hashchange监听页面url中hash的改变：

//页面初始化中添加hashchange的监听
initialize:function(){
    window.addEventListener("hashchange", this.pageHashChange,false);
},

//隐藏
pageHashChange(){
    if(startTimePicker) startTimePicker.hide();
    if(endTimePicker) endTimePicker.hide();
    if(remindPicker) remindPicker.hide();
},

4、一个小的业务场景：当用户进入一个页面按手机系统自带的返回按钮时，弹出一个挽留框，并阻止用户跳出这一行为。

解决方案：

（1）在进入当前页面时，通过加 hash 或者 pushState(null,null,window.location.href)，在 history 栈中增加一条和当前路径相同的地址

（2）当用户点击返回时，会触发window.onhashchange 或 window.onpopstate 事件，让 hash 或 pushState 行为在用户要返回时被监听到，此时弹出挽留框，页面还是之前的页面没有变化。

hashchange和popstate事件触发条件

一. hasChange 触发条件

hash是URL中#后面那部分，同时修改hash值不会引起页面的刷新，也不会向服务器重新发送请求。通过hashchange事件可以监听它的变化。改变hash值有以下三种方式：

浏览器前进后退改变URL
通过a标签锚点方式改变URL。
通过window.location.hash改变URL
调用history的back、go、forward方法

不能触发事件的方式

pushState和replaceState

备注：以上三种方式均可以触发hashchang事件, pushState和replaceState均不能触发hashchang事件

二. popstate触发条件

history提供了popstate监听事件，但是只有以下两种情况会触发该事件

点击浏览器前进后退的按钮
显示调用history的back、go、forward方法