JS监听浏览器的返回事件

最新推荐文章于 2024-09-12 09:28:55 发布

柏灿

最新推荐文章于 2024-09-12 09:28:55 发布

阅读量1.8w

点赞数

分类专栏： JS 前端 VUE

本文链接：https://blog.csdn.net/shan1991fei/article/details/84107087

版权

JS 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

前端

25 篇文章 0 订阅

订阅专栏

VUE

12 篇文章 0 订阅

订阅专栏

本文介绍了一种使用JavaScript监听浏览器返回按钮的方法，通过在页面中利用pushState方法向history对象添加URL，并监听popstate事件，从而实现在用户点击返回按钮时触发自定义功能。

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

最近在实现一个需求，要求监听浏览器的返回操作，百度之后都是这个方法，原理如下：

在页面中我们可以使用javascript window history，后退到前面页面，但是由于安全原因javascript不允许修改history里已有的url链接，但可以使用pushState方法往history里增加url链接，并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件监测，那么我们就可以进行监听。

$(function(){
pushHistory();
window.addEventListener("popstate", function(e) {
    alert("监听到返回按钮事件啦");
    //根据自己的需求实现自己的功能
    //window.location.href = 'https://www.baidu.com'
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
});