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

一.同一网站内

1.监听返回事件

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

2.增加⼀个本页URL

虽然我们监听到了后退事件，但是页⾯还是会返回上⼀个页⾯，所以我们需要使⽤pushState增加⼀个本页的url,

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

3.完整代码

闭包

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

vue

const popStateHandle = function () {
    //处理逻辑
}
onMounted(() => {
    window.history.pushState(null, null, '')
    window.addEventListener('popstate', popStateHandle, false)
})
onUnmounted(() => {
    //销毁
    window.removeEventListener('popstate', popStateHandle)
})

二.不同网站内

1.需求

网站A-页面a.page 转到网站B -页面b.page 在b.page点击浏览器右上角返回让他监听到并且跳转到B网站的b_c.page

2.问题

popstate事件监听不管用，因为history.state没有数据，直接返回至a.page

3解决方案

1.在B网站加一个空白的页面b_empty.page放入上面的监听代码 2.A网站的a.page跳转到B网站的b_empty.page 3.b_empty.page 自动跳转到b.page 这样在b.page 返回b_empty.page的时候就能监听到了

参考文章

https://blog.csdn.net/m0_55969466/article/details/125189282

https://blog.csdn.net/qq_43383334/article/details/126642348