JavaScript 开发：如何监听 pushstate 和 replacestate 变化？示例详解！

在JavaScript中，你可以使用`window.history`对象的`pushState()`和`replaceState()`方法来改变浏览器的历史记录，然后使用`window.addEventListener('popstate')`来监听这些变化。 以下是一个简单的示例： ```javascript window.addEventListener('popstate', function(event) { // 这里会触发，当用户点击浏览器的后退或者前进按钮，或者使用history.pushState()和history.replaceState()改变URL时 console.log('popstate event'); console.log(event); }, false); ``` 在这个示例中，每当用户改变浏览器的历史记录时，都会触发`popstate`事件，然后在控制台打印出事件的详细信息。 如果你想监听`pushState()`和`replaceState()`的变化，你可以直接调用这些方法，并传递一个回调函数作为参数。例如： ```javascript history.pushState(null, null, '/new-url'); ``` 在这个示例中，`pushState()`方法会改变浏览器的历史记录，并且立即触发`popstate`事件。在回调函数中，你可以访问到新的URL和旧的URL。 注意，`pushState()`和`replaceState()`方法不会改变`window.location.href`的值，所以如果你只是想要改变浏览器的URL，你可以直接修改`window.location.href`的值。 ######[AI写代码神器 | 273点数解答 | 2023-11-09 01:36:50]