onhashchange事件详解

小蓝 • 2024-12-20 15:03 • 编程

开发网页时，我们常常需要获取浏览器当前的状态并根据它来修改网页内容。常用的方法是监听浏览器地址栏的变化。在过去我们可能需要一直进行轮询等待地址栏状态的改变，但现在浏览器提供了一个更好的方法，那就是使用onhashchange事件。

一、onhashchange不触发

想要正确使用onhashchange事件，我们需要先理解它的触发条件。onhashchange事件只会在浏览器的hash值发生改变时触发，比如通过点击链接跳转、前进后退按钮等方式改变hash值。如果hash值不变，则事件不会触发，这也是很多开发人员会出现onhashchange不触发的状况。

举个例子，如果我们通过以下代码更改hash值：

window.location.hash = 'newHash';

这种方式是不会触发onhashchange事件的。

二、onhashchange事件什么时候触发

当我们通过浏览器的前进后退按钮，或是手动修改地址栏中的hash值，onhashchange事件会被触发，此时我们可以通过event对象获取到相关信息。

window.onhashchange = function(event) {
  console.log(event.oldURL); // 改变前的URL
  console.log(event.newURL); // 改变后的URL
}

请注意，这里的oldURL和newURL可能并不包含hash部分。如果想要获取具体的hash值，可以通过window.location.hash来获取。

三、onhashchange事件

在实际开发中，我们可以利用onhashchange事件来实现一些有趣的功能。比如，当我们需要在页面内添加一个类似于浏览器的前进后退按钮时，可以通过onhashchange事件来监听地址栏的变化，并随时更新页面内容。

window.onhashchange = function() {
  if(window.location.hash === '#page1') {
    // 更新页面内容
  } else if(window.location.hash === '#page2') {
    // 更新页面内容
  } else {
    // 更新页面内容
  }
}

另外，当我们需要实现一些单页面应用或是通过hash值进行路由控制时，也可以通过onhashchange事件来监听地址栏的变化，并根据hash值做出相应的操作。

四、onhashchange用法

除了监听hash值的变化外，onhashchange事件还可以用于处理一些浏览器兼容性问题。比如，在IE8及以下的浏览器中，hash值的变化不会触发window.onhashchange事件。此时我们可以通过以下方式来模拟hash值的变化，从而达到同样的效果：

setInterval(function () {
  if (window.location.hash !== hash) {
    hash = window.location.hash;
    window.onhashchange && window.onhashchange();
  }
}, 100);

这里使用setInterval函数来模拟hash值的变化，如果发现hash值发生了变化，则手工触发onhashchange事件。

五、onhashchange兼容性

onhashchange事件最初是在HTML5规范中引入的，因此在早期的IE浏览器中并不支持该事件。不过我们可以通过以下方法来进行兼容性处理：

if (!("onhashchange" in window)) {
  window.onhashchange = function(event) {
    console.log(event.oldURL); // 改变前的URL
    console.log(event.newURL); // 改变后的URL
  }
}

这里判断了浏览器是否支持onhashchange事件，如果不支持，则手动添加事件处理函数。

六、onhashchange什么意思

onhashchange事件是一个DOM Level 2事件，它和window对象紧密相关，当浏览器url中的hash值发送变化时，onhashchange事件会被触发，开发人员可以在事件的回调函数中实现一些自定义的操作。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/279332.html