html如何监听url变化

在HTML中，我们无法直接监听URL的变化，我们可以使用JavaScript来实现这个功能，以下是一个简单的示例，展示了如何使用JavaScript监听URL变化的方法：

（图片来源网络，侵删）

1、使用window.location对象获取当前URL

在JavaScript中，我们可以使用window.location对象来获取当前浏览器的URL。

var currentUrl = window.location.href;
console.log("当前URL是：" + currentUrl);

2、使用window.addEventListener监听URL变化

要监听URL的变化，我们可以使用window.addEventListener方法为popstate事件添加一个事件处理函数，当浏览器的历史记录发生变化时，popstate事件会被触发。

// 定义一个事件处理函数，用于处理URL变化
function handleUrlChange(event) {
  console.log("URL已变化");
}
// 为popstate事件添加事件处理函数
window.addEventListener("popstate", handleUrlChange);

3、使用history对象的pushState和replaceState方法改变URL

要改变浏览器的URL，我们可以使用history对象的pushState和replaceState方法，这两个方法都会更新浏览器的历史记录，但它们之间有一些区别。

pushState方法会向历史记录中添加一个新的条目，而不会修改当前条目，这意味着，当我们点击浏览器的后退按钮时，浏览器会返回到上一个历史记录条目。

replaceState方法会替换当前历史记录条目，而不是添加一个新的条目，这意味着，当我们点击浏览器的后退按钮时，浏览器不会返回到上一个历史记录条目。

以下是使用这两个方法改变URL的示例：

// 创建一个状态对象，包含一些信息（可选）
var stateObj = { foo: "bar" };
// 使用pushState方法改变URL
history.pushState(stateObj, "新标题", "newurl");
console.log("URL已改变为：" + window.location.href);
// 使用replaceState方法改变URL
history.replaceState(stateObj, "新标题", "newurl");
console.log("URL已改变为：" + window.location.href);

4、使用history.back、history.forward和history.go方法导航历史记录

除了使用pushState和replaceState方法改变URL外，我们还可以使用history.back、history.forward和history.go方法导航历史记录，这些方法都是基于浏览器的历史记录进行操作的，因此它们不会影响服务器端的URL。

以下是使用这些方法导航历史记录的示例：

// 导航到上一个历史记录条目（如果存在）
history.back();
console.log("导航到上一个历史记录条目");
// 导航到下一个历史记录条目（如果存在）
history.forward();
console.log("导航到下一个历史记录条目");
// 导航到指定的历史记录条目（索引从0开始）
history.go(2); // 导航到第三个历史记录条目（如果存在）
console.log("导航到指定的历史记录条目");

归纳一下，要监听HTML中的URL变化，我们可以使用JavaScript编写如下代码：

// 定义一个事件处理函数，用于处理URL变化
function handleUrlChange(event) {
  console.log("URL已变化");
}
// 为popstate事件添加事件处理函数
window.addEventListener("popstate", handleUrlChange);

通过这种方法，我们可以在URL发生变化时执行相应的操作，需要注意的是，这种方法只能在客户端实现，服务器端无法感知这种变化。