zoukankan      html  css  js  c++  java
  • IOS微信浏览器返回事件监听问题

    业务需求:从主页进入A订单页面,然后经过各种刷新或点标签加载后点左上角的返回直接返回到主页
    采取方法:采用onpopstate事件监听url改变,从而跳转到主页
    遇到的问题:安卓上测试没问题;苹果手机微信里进入A页面直接触发onpopstate返回主页,造成类似闪退现象,
    给popstate监听事件addEventListener加延时后问题依旧,设置flag标志使popstate事件里的跳转函数加延时问题解决,
    但是只是解决了从主页跳转到A页面的问题,A订单页面点订单跳转到订单详情B页面,从B页面返回A页面时出现了问题,
    直接触发popstate的回调函数跳转到了主页,而没有留在A页面。目前只有IOS上的微信出现这个问题了,怎么解决?
    在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面或执行一些其它操作的
    需求,那在代码中怎样监听当点击微信、支付宝、百度糯米、百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢。
     
    我相信很多朋友像我一样,在百度、搜狗里面搜索很久都没找到方法。下面就来告诉大家怎样监听的方法:
     
     
    首先我们要了解浏览器的history。大家知道在页面中我们可以使用javascript window history,后退到前面页面,但是由于安全原因javascript不允许修改
    history里已有的url链接,但可以使用pushState方法往history里增加url链接,并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件
    监测,那么我们就可以进行监听。
     
    返回、后退、上一页按钮点击监听实现代码:
    
    window.addEventListener("popstate", function(e) {  
            alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
        }, false);  
    
    虽然我们监听到了后退事件,但是页面还是会返回上一个页面,所以我们需要使用pushState增加一个本页的url,代表本页,大家都非常清楚是#
    
     
    
    function pushHistory() {  
            var state = {  
                title: "title",  
                url: "#"  
            };  
            window.history.pushState(state, "title", "#");  
        }  
    
    当进入该页面,我们就给这个history压入一个本地的连接。当点击返回、后退及上一页的操作时,就进行监听,在监听代码中实现自己操作。
    下面是完整的代码:
    //匿名函数
    $(function(){
       getHistory();
        var flag=false;
    setTimeout(function(){
        flag=true
    },1000)
       window.addEventListener('popstate',function(e){
       //监听到返回事件
        if(flag){
       //自己想要做的事情
          }
        getHistory();
    },false);      
    function getHistory(){
       var state={
       title:'',
       url:'//可写返回事件的跳转路径'  
    } ;
    window.history.pushState(state,'title',url);
    }
    })


  • 相关阅读:
    centos8 将SSSD配置为使用LDAP并要求TLS身份验证
    Centos8 搭建 kafka2.8 .net5 简单使用kafka
    .net core 3.1 ActionFilter 拦截器 偶然 OnActionExecuting 中HttpContext.Session.Id 为空字符串 的问题
    Springboot根据不同环境加载对应的配置
    VMware Workstation12 安装 Centos8.3
    .net core json配置文件小结
    springboot mybatisplus createtime和updatetime自动填充
    .net core autofac依赖注入简洁版
    .Net Core 使用 redis 存储 session
    .Net Core 接入 RocketMQ
  • 原文地址:https://www.cnblogs.com/lipengze/p/11426122.html
Copyright © 2011-2022 走看看