js本身是無法禁止頁面回退的,但是我們可以通過一些特殊操作來達到這個效果,我們主要用到:
為瀏覽器加一個當前網址的歷史記錄,這樣當點擊回退時,就會回到當前頁面,相當於沒回退,然后給用戶的感覺就是沒有回退
window.history.pushState(null, null, document.URL);
首先我們需要在剛進入頁面時在瀏覽器歷史記錄中加一條當前頁面的記錄,入上代碼,
另外我們需要監聽頁面后退,在頁面后退的回調方法中再加一條當前網址的歷史記錄,為什么呢?
當我們回退成功后,如果不加歷史記錄,那么再次回退時,就回退到了之前的歷史記錄了,所謂的禁止回退的效果就失效了,所以我們需要在回退的回調函數內加一條歷史記錄,防止下一次回退會真正的回退到之前的記錄,
這樣循環往復,我們點擊回退,永遠都會停留在當前頁面,從而造成禁止瀏覽器回退的假象。
監聽瀏覽器回退的方法:
window.addEventListener('popstate', this.popstateFun,false);
popstateFun方法
popstateFun(){ //監聽瀏覽器回退的回調 window.history.pushState(null, null, document.URL); //想瀏覽器跳轉記錄中添加一條空記錄 }
另外,注意一點的是,在頁面銷毀時,記得將這個方法解除綁定,否者,所有的頁面都無法回退了
window.removeEventListener('popstate', this.popstateFun);
。