微信内嵌H5 监听用户返回离开页面

最新推荐文章于 2026-01-09 16:19:01 发布

原创最新推荐文章于 2026-01-09 16:19:01 发布 · 5.7k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种在用户未保存资料前离开页面时进行提醒的方法。通过使用JavaScript的History API，可以在不刷新页面的情况下监听用户的离开行为，并弹出是否保存的提示。

使用场景：保存用户填写部分资料的时候，需要判断用户离开，提示是否保存操作

 this.pushHistory();


       window.addEventListener("popstate", function(e) {
           //do something
            console.log("我监听到页面离开了")
        }，false);


    pushHistory: function() { //改方法添加了一个历史记录，路径为#，保证了不刷新页面，不直接后退。
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    },

参考知识点 History详解

https://developer.mozilla.org/zh-CN/docs/Web/API/History_API