JavaScript 检测 URL 哈希更改

在编写网页的过程中，我们经常需要使用 URL 哈希来在前端实现一些交互效果。例如单页应用程序（SPA）中，通过改变 URL 哈希来实现页面跳转和加载。但是，在用户修改 URL 哈希时，我们希望能够做出相应的响应。本文将介绍如何使用 JavaScript 来检测 URL 哈希的更改，并通过示例代码来说明。

监听 URL 哈希更改事件

要在 JavaScript 中检测 URL 哈希的更改，我们可以使用 hashchange 事件。该事件在 URL 哈希更改时触发。我们只需要在页面的加载时添加事件监听器即可：

window.addEventListener("hashchange", function() {
  // 哈希值发生更改时的处理代码
});

在上面的代码中，我们将 hashchange 事件和一个回调函数传递给addEventListener() 方法。回调函数将在哈希值更改时调用，并在其中编写我们希望执行的代码。

获取当前 URL 哈希值

要获取当前页面的 URL 哈希值，我们可以使用 location.hash 属性。该属性返回当前 URL 中的哈希部分，也就是 # 后面的内容。例如下面的 URL：

http://example.com/page.html#section1

location.hash 将返回 #section1 字符串。

console.log(location.hash); // 输出 '#section1'

检测 URL 哈希值的更改

一旦我们有了当前的哈希值，我们就可以使用 setInterval 函数来间隔地检查它是否发生了更改。例如下面的代码将每秒检查一次哈希值是否发生了更改，并显示最新的哈希值：

setInterval(function() {
  if (location.hash !== currentHash) {
    currentHash = location.hash;
    console.log("Hash changed to " + currentHash);
  }
}, 1000);

在上面的代码中，我们使用一个全局变量 currentHash 来保存当前的哈希值。在每秒检查哈希值时，如果当前的哈希值和上一次保存的哈希值不同，则说明哈希值已经更改。此时我们将当前的哈希值保存到 currentHash 中，并在控制台中输出哈希值的更改。

示例代码

下面是完整的示例代码。当 URL 哈希值发生更改时，该代码将在页面上显示当前的哈希值。

let currentHash = location.hash;

window.addEventListener("hashchange", function() {
  currentHash = location.hash;
  console.log("Hash changed to " + currentHash);
});

setInterval(function() {
  if (location.hash !== currentHash) {
    currentHash = location.hash;
    console.log("Hash changed to " + currentHash);
  }
}, 1000);

结论

本文介绍了如何在 JavaScript 中检测 URL 哈希值的更改。我们可以使用 hashchange 事件来监听 URL 哈希的更改，并使用 location.hash 属性获取当前的哈希值。通过这些技巧，我们可以编写出更加交互性和实用的单页应用程序。