js监听浏览器返回、后退、上一页按钮事件方法

最新推荐文章于 2023-12-04 14:49:08 发布

小任同学`

最新推荐文章于 2023-12-04 14:49:08 发布

阅读量2.2w

点赞数 8

分类专栏： js vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_55969466/article/details/125189282

版权

vue 同时被 2 个专栏收录

28 篇文章

订阅专栏

26 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript监听浏览器的返回按钮事件，通过pushState方法添加历史记录，并在popstate事件触发时执行自定义功能，防止页面实际返回上一页。提供了完整的代码示例，适用于前端开发中的页面导航控制。

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

一、监听浏览器事件

⼤家知道在页⾯中我们可以使⽤javascript window history，后退到前⾯页⾯，但是由于安全原因javascript不允许修改history
⾥已有的url链接，但可以使⽤pushState⽅法往history⾥增加url链接，并且提供popstate事件监测从history栈⾥弹出url。既然
有提供popstate事件监测，那么我们就可以进⾏监听。
返回、后退、上⼀页按钮点击监听实现代码：

window.addEventListener("popstate", function(e) { 
alert("我监听到了浏览器的返回按钮事件啦");//根据⾃⼰的需求实现⾃⼰的功能
}, false);

二、增加一个url

虽然我们监听到了后退事件，但是页⾯还是会返回上⼀个页⾯，所以我们需要使⽤pushState增加⼀个本页的url,代表本页，⼤
家都⾮常清楚是#

function pushHistory() { 
var state = { 
title: "title", 
url: "#" 
}; 
window.history.pushState(state, "title", "#"); 
}

三、完整代码

当进⼊该页⾯，我们就给这个history压⼊⼀个本地的连接。当点击返回、后退及上⼀页的操作时，就进⾏监听，在监听代码中
实现⾃⼰操作。
下⾯是完整的代码：

$(function(){ 
pushHistory(); 
window.addEventListener("popstate", function(e) { 
alert("我监听到了浏览器的返回按钮事件啦");//根据⾃⼰的需求实现⾃⼰的功能
}, false); 
function pushHistory() { 
var state = { 
title: "title", 
url: "#" 
}; 
window.history.pushState(state, "title", "#"); 
} 
});

const popStateHandle = function () {
     //处理逻辑
    }

onMounted(() => {
   window.history.pushState(null, null, '')
   window.addEventListener('popstate', popStateHandle, false)
     })
onUnmounted(() => {
    //销毁
   window.removeEventListener('popstate', popStateHandle)
    })