美文网首页
微信端返回按钮监听处理

微信端返回按钮监听处理

作者: wangjie_Austin | 来源:发表于2017-12-12 23:51 被阅读0次

微信端监听‘返回’事件

下面的方法是在移动端实现的,在微信的浏览器中beforeunload等是被阉割掉的,所以用不了。
而下面的方法存在的问题是:当前页面通过点击事件进入下级页面后,再返回到当前页会直接触发popstate事件,也就意味着会直接弹出confirm,并且当你点击‘确认’的时候,需要点击多次才能返回。出现这两个问题的原因是:
1、popstate事件不可被移除,当你从子页面返回的时候,popstate会被触发(ios并不会刷页面),并且执行
2、子页面返回会往history栈中添加一条历史记录,所以在返回的时候不会跳转回去,并且因为当前页面重写了pushState,所以会出现停留在当前页

因此,这边进行的处理就是在页面加载后直接进行window.location.back();同时,对事件的执行进行延迟

// 判断点击左上角返回
$(document).ready(function (e) {
// 最好写在页面加载请求的接口中
if(window.location.hash === '#hash'){
    window.history.back();
}
pushHistory();

let bool = false;
setTimeout(function () {
    bool = true;
}, 1500);
    window.addEventListener('popstate', function (e) {
       if(bool) {
            var cfi = confirm("确定要离开当前页面嘛?");
            if(cfi) {
                window.history.back();
            }else{
                document.write("You pressed cancel!")
            }
        }
    }, false);
    function pushHistory () {
        let state = {
            title: 'title',
            url: '#'
        };
        window.history.pushState(state, 'title', '#');
    }
});

附上,popstate是h5新出的api,还有用于监听hash的api叫hashchange,就是监听跟在#符号后面的URL部分,包括#符号变化,但是hashchange不管是back,还是forward都会触发。

相关文章

  • 微信端返回按钮监听处理

    微信端监听‘返回’事件 下面的方法是在移动端实现的,在微信的浏览器中beforeunload等是被阉割掉的,所以用...

  • 监听微信返回按钮

    利用HTML5的window.history.pushState特性,例如 当从A页面进入时,先判断window....

  • iOS微信支付结果页面返回原程序按钮

    关于iOS微信支付返回原程序按钮点击处理事件 1:点击右上角的返回App按钮 点击此按钮,走的是正常微信结果回调方...

  • 移动端监听返回按钮

    1.mounted中调用方法 mounted(){ this.browserBackBtn(); } 2.meth...

  • 监听微信浏览器的回退事件

    浏览器回退事件的监听: 当前所进行的处理是点击返回时关闭页面 同时对ios微信端popstate自动触发的bug做...

  • 微信小程序的返回按钮监听

    目前小程序本身还没有做到监听左上角返回的事件,它的机制现在与浏览器类似。 但是,可以换一种思路,如下: 通过web...

  • 跳转外部域名网站

    解决手机返回按钮的监听页面返回....

  • 2. UITextField

    标签:代理、监听编辑状态、监听返回按钮、键盘属性(返回按钮等)、Storyboard属性详解 一、常用技巧: 1....

  • 可能你所不知道的知识

    一、监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法 虽然我们监听到了后退事件,但是页面还是...

  • 微信浏览器左上角返回按钮的监听

    点击微信浏览器左上角返回按钮,指定跳到对应的页面 点击微信浏览器左上角返回按钮,关闭当前页面返回到微信公众号

网友评论

      本文标题:微信端返回按钮监听处理

      本文链接:https://www.haomeiwen.com/subject/tjwqixtx.html