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

最新推荐文章于 2024-05-30 19:58:03 发布

原创最新推荐文章于 2024-05-30 19:58:03 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

微信开发专栏收录该内容

2 篇文章

订阅专栏

本文探讨了一种在网页开发中遇到的特殊场景——由于不当的重定向逻辑导致的无限循环问题。具体而言，当一个页面首次加载时，会根据业务需求重定向至另一页面获取OpenId，然而这一操作会导致用户在点击返回时陷入无限循环的重定向。文章提出了解决方案，即利用window.history.pushState方法增加历史记录，并结合onpopstate事件来避免无限循环。

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

在一个页面的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);
        })