微信開發,仿原生實現 「再按一次返回」功能

方案原理

利用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", "#");  
     }  
相關文章
相關標籤/搜索