监听浏览器的前进和后退按钮

最新推荐文章于 2024-05-24 22:01:28 发布

kkndyyrolf

最新推荐文章于 2024-05-24 22:01:28 发布

阅读量2.8k

点赞数

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

本文链接：https://blog.csdn.net/kkndyyrolf/article/details/108623144

版权

本文介绍了一种仿小程序的前端路由实现，该路由能兼容PC和H5，并详细说明了如何监听浏览器的popstate事件来处理前进和后退按钮的点击。通过对比历史记录中的time值，可以区分用户点击的是前进还是后退按钮。

摘要由CSDN通过智能技术生成

研究小程序好长一段时间了，写了一个仿小程序的前端路由。兼容PC/H5，并监听浏览器的前进和后退按钮点击并分别处理逻辑。

对popstate关键字做监听方法，能够实时拦截用户点击前进、后退按钮的操作，但不能够区分用户到底点击的是前进按钮还是后退按钮

监听popstate

window.addEventListener("popstate", function (evt) {
   
  callback(evt) //响应前进、后退的回调方法
}, false)

pushState推送历史记录

window.history.pushState({
   }, '页面标题', 'urlpath')

关注

专栏目录