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);
}
})

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

猜你喜欢