js：如何监听history的pushState方法和replaceState方法。（高阶函数封装+自定义事件）

最新推荐文章于 2024-07-06 14:03:23 发布

松果Tech

最新推荐文章于 2024-07-06 14:03:23 发布

阅读量3.4k

点赞数 1

分类专栏： web前端文章标签： javascript html5

原文链接：https://zhuanlan.zhihu.com/p/269853186

版权

web前端专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种监听浏览器历史记录变化的方法，通过重写history的pushState和replaceState来实现自定义事件监听，进而达到监听路由变化的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出现原因：

想要监听路由变化就需要监听history的pushState和replaceState事件，但是原生并没有支持，此时，我们就得自己添加事件监听。

解决方法：

高阶函数封装自定义事件：

const bindHistoryEvent = function(type) {
   const historyEvent = history[type];
   return function() {
       const newEvent = historyEvent.apply(this, arguments); //执行history函数
      const e = new Event(type);  //声明自定义事件
       e.arguments = arguments;
       window.dispatchEvent(e);  //抛出事件
       return newEvent;  //返回方法，用于重写history的方法
   };
};

重写history原有的方法：

history.pushState =  bindHistoryEvent('pushState');
history.replaceState =  bindHistoryEvent('replaceState');

监听事件：

window.addEventListener('replaceState', function(e) {
  console.log('THEY DID IT AGAIN! replaceState');
});
window.addEventListener('pushState', function(e) {
  console.log('THEY DID IT AGAIN! pushState');
});