监听微信内、浏览器返回事件

最新推荐文章于 2023-05-17 10:52:02 发布

旮旯里的程序员

最新推荐文章于 2023-05-17 10:52:02 发布

阅读量1.2k

点赞数

分类专栏：拦截页面返回文章标签：前端 javascript html5

本文链接：https://blog.youkuaiyun.com/xjh18831423051/article/details/127277549

版权

拦截页面返回专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在用户修改信息后返回前进行确认的方法，通过监听浏览器的返回事件来实现。主要适用于网页应用，确保用户不会丢失未保存的更改。

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

最近做了一个信息编辑页面，如果用户有改动过信息点击返回后需要拦截返回，并弹出框提示是否需要保存本次修改，两个按钮保存和不保存，保存-调接口然后返回上一页面，不保存-直接返回上一页面。

谷歌浏览器和微信内均有效其余浏览器未测试

根据需求触发监听事件

monitorBack() {
    window.history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.popstateFunction, false);
    // this.popstateFunction 为监听到返回时触发的函数
}

根据需求编写触发浏览器返回后的逻辑

需要一直拦截返回就不要增加取消监听事件

需要拦截一次就在取消监听事件后增加页面返回

// 监听触发
popstateFunction() {
    // 拦截返回后的逻辑

    // 取消监听事件
    window.removeEventListener('popstate', this.popstateFunction, false);
}

踩到的坑！！！

拦截返回后调接口需要返回上一页面，直接将

window.removeEventListener('popstate', this.popstateFunction, false);

写在了接口调用完成内在其下面增加返回上一级，导致返回失效（需要在点一次返回）或者需要多层级返回。

解决方式不需要在接口内添加删除监听事件，直接返回，触发监听事件，在触发的事件内取消监听事件如上监听触发函数，在执行一次返回。