📅 最后修改于: 2023-12-03 15:24:56.494000 🧑 作者: Mango
history.pushState() 方法是 HTML5 中新增的 API，它能够改变浏览器的 URL，同时不会重新载入页面。这个 API 可以帮助我们通过 JavaScript 动态修改 URL，使得网站变得更加优雅。
但是，在使用 history.pushState() 方法时，一些开发者会遇到这个问题：如何知道用户通过浏览器前进或后退按钮从一个页面到另一个页面时，URL 发生了更改？
本文将介绍如何利用 popstate 事件来监听浏览器的 URL 更改。
在使用 history.pushState() 方法修改 URL 后，我们需要在代码中添加监听函数。这个监听函数会在用户通过浏览器的前进或者后退按钮来完成 URL 更改时被调用。我们可以利用这个函数来通知代码，URL 更改的事件已经发生，从而做出相应的处理。
window.addEventListener('popstate', function(event) {
console.log('URL 更改！');
});
代码中我们使用 addEventListener 方法来监听popstate 事件。当这个事件被触发时，我们的监听函数会被调用，并输出一条日志信息。
下面我们演示一下如何使用 history.pushState() 方法来动态修改 URL。我们创建了两个按钮，在页面上的点击时，会使用 pushState() 方法来更改 URL。我们还添加了监听函数，在用户点击浏览器的前进或者后退按钮时进行捕获。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="button1">更改 URL #1</button>
<button id="button2">更改 URL #2</button>
<script>
function pushState(url) {
history.pushState({}, '', url);
console.log('pushState 被调用，URL 更改为：', url);
}
function handlePopstate(event) {
if (event.state !== null) {
console.log('popstate 被调用，URL 更改为：', document.location.href);
}
}
window.addEventListener('popstate', handlePopstate);
document.querySelector('#button1').addEventListener('click', function() {
pushState('/url/1');
});
document.querySelector('#button2').addEventListener('click', function() {
pushState('/url/2');
});
</script>
</body>
</html>
在运行这个程序后，你会发现当你点击两个按钮时，URL 已经动态更改了。同时，在你点击浏览器的前进、后退按钮时，页面也会捕捉到 popstate 事件，并输出一条日志信息。
通过利用 popstate 事件，我们可以在代码中监听浏览器的 URL 更改事件。通过这种方式，我们能够构建出更加优雅的单页面应用程序。