一点经验分享 / 在微信H5浏览器 / 拦截用户后退 /并做业务处理

前几个月回到老公司看到老项目里有个特别“蹩脚”的业务实现：

在一个页面的GET请求Action方法中判断是否携带OpenId,如果没有，直接重定向到一个API，这个API是用来获取用户在另一个公众号的OpenId的，不是当前公众号，主要是为了，实现用另一个公众号实现微信支付；好Shit呀，这样一搞，视图页面就乱了个球了。

最终，这个页面将会被请求两次，第一次需要重定向。那么问题来了，用户停留的最终是第二次请求的页面。点击返回后，又被重定向，在点返回，又被重定向。。。。。。（无限循环，需要手速快，连点两次才能解决）

解决方案：

虽然浏览器能够捕捉返回事件（popstate），但依然阻止不了返回行为，这时候需要：window.history.pushState 这个方法,

页面加载完成后，把当前页面压入状态栈两次，这样一来多了两条记录，通过onpopstate 事件判断，可以在这里进行业务处理，例如：弹出提示框，是否确认退出等诸如此类。

        window.onpopstate = function (e) {
            if (e.state.flag === 'n1') {
                window.history.go(-2);
            }
                
        };
        $(function () {
            window.history.pushState({ flag: 'n1' }, '', location.href);
            window.history.pushState({ flag: 'n2' }, '', location.href);
        })