JS監聽瀏覽器的返回、後退、上一頁按鈕的事件方法

時間 2019-11-11

原文原文鏈接

在實際的應用中，咱們經常須要實如今移動app和瀏覽器中點擊返回、後退、上一頁等按鈕實現本身的關閉頁面、調整到指定頁面或執行一些其它操做的需求，那在代碼中怎樣監聽當點擊微信、支付寶、百度糯米、百度錢包等app的返回按鈕或者瀏覽器的上一頁或後退按鈕的事件呢。javascript

我相信不少朋友像我同樣，在百度、搜狗裏面搜索好久都沒找到方法。java

下面就來告訴你們怎樣監聽的方法：瀏覽器

首先咱們要了解瀏覽器的history。安全

你們知道在頁面中咱們可使用javascript window history，後退到前面頁面，可是因爲安全緣由javascript不容許修改history裏已有的url連接，但可使用pushState方法往history裏增長url連接，而且提供popstate事件監測從history棧裏彈出url。既然有提供popstate事件監測，那麼咱們就能夠進行監聽。微信

返回、後退、上一頁按鈕點擊監聽實現代碼：app

 
         window.addEventListener( 
         "popstate" 
         ,  
         function 
         (e) {  
        
 
         alert( 
         "我監聽到了瀏覽器的返回按鈕事件啦" 
         ); 
         //根據本身的需求實現本身的功能  
        
 
         },  
         false 
         ); 
        

雖然咱們監聽到了後退事件，可是頁面仍是會返回上一個頁面，因此咱們須要使用pushState增長一個本頁的url,表明本頁，你們都很是清楚是#url

 
         function 
         pushHistory() {  
        
         var 
         state = {  
        
         title:  
         "title" 
         ,  
        
         url:  
         "#" 
        
         };  
        
         window.history.pushState(state,  
         "title" 
         ,  
         "#" 
         );  
        
         }

當進入該頁面，咱們就給這個history壓入一個本地的鏈接。當點擊返回、後退及上一頁的操做時，就進行監聽，在監聽代碼中實現本身操做。spa

下面是完整的代碼：.net

 
         $( 
         function 
         (){  
        
         pushHistory();  
        
         window.addEventListener( 
         "popstate" 
         ,  
         function 
         (e) {  
        
         alert( 
         "我監聽到了瀏覽器的返回按鈕事件啦" 
         ); 
         //根據本身的需求實現本身的功能  
        
         },  
         false 
         );  
        
         function 
         pushHistory() {  
        
         var 
         state = {  
        
         title:  
         "title" 
         ,  
        
         url:  
         "#" 
        
         };  
        
         window.history.pushState(state,  
         "title" 
         ,  
         "#" 
         );  
        
         }  
        
         });