0

    IOS微信浏览器返回事件popstate监听

    2023.07.23 | admin | 141次围观

    问题:

    通过监听popstate事件浏览器回退按钮事件,来判断是否点击返回按钮,比如从A页面跳转到B页面(监听popstate),然后再跳转到C页面,点击返回的按钮,测试成功,包括安卓版,但是问题来了,IOS版的微信,是会立即触发popstate事件,导致直接从C页面跳转到A页面,其他的支付宝(安卓、IOS)、微信(安卓)都是可以,就是微信IOS版不行。

    经过查找相关资料,选择了一个方法,不过有点弊端,但是并不影响操作,通过popstate、pageshow两个事件进行判断验证。

    /** 
     * 浏览器回退事件监听 
     */  
    var listenerBackHandler = {  
        param: {  
            isRun: false, //防止微信返回立即执行popstate事件  
        },  
        listenerBack: function () {  
            var state = {  
                title: "title",  
                url: "#"  
            };  
            window.history.pushState(state, "title", "#");  
            window.addEventListener("popstate", function (e) {  
                if (listenerBackHandler.param.isRun) {  
                        window.location.href = "Home/Index"; //返回到主页  
                    }  
                }  
            }, false);  
        },  
        //初始化返回事件  
        initBack: function () {  
            window.addEventListener('pageshow', function () {  
                listenerBackHandler.param.isRun = false;  
                setTimeout(function () { listenerBackHandler.param.isRun = true; }, 1000); //延迟1秒 防止微信返回立即执行popstate事件  
                listenerBackHandler.listenerBack();  
            });  
        }  
    }  

    原理:

    因为在IOS微信浏览器里,返回上一个页面时,必定会触法popstate事件,就会导致立即执行返回到A页面。通过pageshow事件先延迟1秒的事件,让执行popstate事件时无法返回,等定时器把isRun的值改成true,然后再点击返回按钮,就会再次执行popstate事件,就可以返回到你想要的页面。

    弊端:

    就是如果有人手速太快浏览器回退按钮事件,返回到B页面就立即点击返回按钮,此时出现点击没有反应,再次点击就能返回,给人的感觉好像没有点击到返回按钮,这个概率还是很小。

    版权声明

    本文仅代表作者观点。
    本文系作者授权发表,未经许可,不得转载。

    发表评论