微信开发,仿原生实现 “再按一次返回”功能

方案原理

利用HTML5的window.history.pushState特性,例如 当从A页面进入时,先判断window.history.length==1那么调用window.history.pushState 写进一个空历史记录。并且监听返回键,当按下返回键时(我们是没办法阻止返回事件的,但由于上一个历史记录是空白的,所以的还是当前页面。),监听到返回事件 使用layer弹框插件提示,“您确定要返回微信吗?” 或者其他。点击【再逛逛】,则再次写入空白历史记录,点击【确定】或者再次点击【返回键】则关闭微信浏览器。

方案代码

     if(window.history.length==1){//判断是第一次从微信菜单进入页面
         //写入空白历史记录
         pushHistory();  

     }
     
     //延时监听   
     setTimeout(function () {  
          //监听物理返回按钮  
          window.addEventListener("popstate", function(e) {  
                
                   
                layer.open({
                        content: '您确定要返回微信吗?',
                      
                        btn: ['确认', '再逛逛'],
                        shadeClose: false,
                    
                        yes: function(){
                            //调用微信浏览器私有API关闭浏览器
                            WeixinJSBridge.call('closeWindow');
                        }, no: function(){
                            //点击【再逛逛】,再次写入空白历史记录
                            pushHistory();
                        }
                });
          }, false);  
      
       }, 300);  
        
     function pushHistory() {  
         var state = {  
             title: "title",  
             url: "#"  
         };  
         window.history.pushState(state, "title", "#");  
     }  
原文地址:https://www.cnblogs.com/Life-Record/p/7443042.html