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

42 篇文章 0 订阅
27 篇文章 2 订阅

问题描述:

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

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

pageshow:当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作,同时也会在load事件触发后初始化页面时触发)。

也就是说:你点击后退/前进按钮操作都会执行pageshow事件,而且还是先执行pageshow事件,再执行popstate事件。我们就可以通两则的结合进行操作。

代码:

 

/**
 * 浏览器回退事件监听
 */
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事件,就可以返回到你想要的页面。

调用方式:

1.在需要返回的页面加上如下脚本即可实现返回功能,会返回到 "Home/Index":

<script>
    $(function () {
        listenerBackHandler.initBack(); 
    });
</script>

以上只是一个简单的案例,可以根据不同的需求封装通用的组件,如返回到不同的主页,我是在initBack设置多个参数传递,有返回到主页地址、是否关闭平台弹出层(微信:WeixinJSBridge.call('closeWindow'))、平台类型(微信、支付宝),其实这三个参数基本满足所有的需求。

弊端:

就是如果有人手速太快,返回到B页面就立即点击返回按钮,此时出现点击没有反应,再次点击就能返回,给人的感觉好像没有点击到返回按钮,这个概率还是很小的,除非你撸的太多,手速超快,哈哈哈哈。


 

 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

低调之人

略表心意,哈哈哈

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值