hash特点、hashchange事件介绍及其常见应用场景
一、hash、hashchange 事件介绍
1、hash 是什么？
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分，一般有当前页面中 href 中 # 地址触发。hash 即 URL 中 # 字符后面的部分，具有如下特点：
window.location.hash 值的变化会直接反应到浏览器地址栏（#后面的部分会发生变化），同时，浏览器地址栏 hash 值的变化也会触发 window.location.hash 值的变化，从而触发 onhashchange 事件。
2、hashchange 事件
window.addEventListener('hashchange', function(e) {
console.log(e.oldURL);
console.log(e.newURL)
}, false);
二、实际应用场景
1、hash 的简单应用
页面中有 3 个不同的a标签，当点击不同的a时给filterText赋予不同的值，可利用window.onhashchange事件来实现，这样避免了给每个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值有以下三种方式：
不能触发事件的方式
备注：以上三种方式均可以触发hashchang事件, pushState和replaceState均不能触发hashchang事件
二. popstate触发条件
history提供了popstate监听事件，但是只有以下两种情况会触发该事件
不能触发事件的方式
以上就是hash特点、hashchange事件介绍及其常见应用场景的详细内容，更多关于hash特点hashchange事件介绍的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章: