监听window.location.href变化的事件

在前端开发中，我们经常需要监听页面URL的变化，并对其进行相应的处理。比如，在单页应用（SPA）中，我们会使用路由来实现页面的切换，而路由的实现则需要监听URL的变化。

那么，在JavaScript中，如何监听window.location.href的变化呢？本文将为大家详细介绍这一问题。

通过监听hashchange事件

在早期的Web开发中，我们通常使用锚点（hash）来实现页面的局部跳转。当URL中的锚点改变时，浏览器会触发hashchange事件。

因此，我们可以通过监听hashchange事件来监测URL中锚点的变化。示例代码如下：

window.addEventListener("hashchange", function() {
  console.log("hash changed");
});

然而，在现代Web应用中，我们更多地使用HTML5的History API来实现页面的无刷新跳转。在这种情况下，hashchange事件并不能满足我们的需求。

通过监听popstate事件

HTML5的History API提供了pushState和replaceState方法，它们可以修改浏览器的历史记录，并且不会引起页面的刷新。当我们调用这些方法时，浏览器地址栏中的URL会发生变化，但是hashchange事件并不会被触发。

此时，我们可以使用popstate事件来监听URL的变化。当用户点击前进或后退按钮时，或者通过pushState和replaceState方法修改URL时，浏览器都会触发popstate事件。

window.addEventListener("popstate", function() {
  console.log("location changed");
});

需要注意的是，在页面首次加载时，也会触发一次popstate事件。因此，我们需要判断当前是否为页面首次加载，避免误判。

let isFirstLoad = true;
window.addEventListener("popstate", function(event) {
  if (isFirstLoad) {
    isFirstLoad = false;
    return;
  }
  console.log("location changed");
});

总结

本文介绍了如何在JavaScript中监听window.location.href的变化，主要包括以下两种方式：

• 监听hashchange事件：适用于早期Web开发中使用锚点实现局部跳转的情况。
• 监听popstate事件：适用于现代Web应用中使用History API实现无刷新跳转的情况。

以上两种方式各有优缺点，具体使用时需要根据实际情况进行选择。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31130