單頁應用（SPA）前端javascript如何阻止按下返回鍵頁面回退
阿新 • • 發佈：2019-02-03
這幾年單頁應用很流行，利用html5新特性history.pushState/replaceState 可以操作URL無重新整理動態載入html內容，達到比較好的使用者體驗。
不過經常會遇到這樣一個問題，那就是使用者總是習慣於按返回鍵來返回上一頁，移動端頁面有彈框的時候，使用者期望按下返回鍵來關閉彈框，這時候卻發現返回到了上一頁。。。其中的技術原理我們前端同學都知道，不過使用者不理解啊，你也沒辦法解釋給他們，正常情況下我們會修改頁面互動，儘量避免彈框的出現。不過這樣畢竟使用者體驗不太好。
放在以前，我們也沒辦法了。不過現在我們可以利用history新的API來滿足使用者想要的效果。說實話，阻止安卓返回鍵或者瀏覽器的返回按鈕的預設行為是不可能的。不過我們可以換一種思路，那就是可以在彈框每一次開啟的時候，往history歷史記錄中新增一條和當前頁面一模一樣的記錄，這時候如果瀏覽器返回上一頁的時候就會還停留在當前頁面。
舉個例子：
正常情況下，C頁面有一個彈框
瀏覽器歷史記錄: A>B>C
這時候我們可以在openModal方法中執行history.pushState({}, '')
瀏覽器歷史記錄: A>B>C>C
使用者在彈框開啟的情況下按下返回鍵，頁面返回到上一頁
瀏覽器歷史記錄: A>B>C
這樣就表面上實現了阻止頁面回退，至於使用者是不會管具體的技術細節的。
另外可能還會有一些收尾的工作要做，如果使用者是正常關閉彈框後按下了返回鍵想要返回上一頁，這時候頁面會仍然停留在當前頁面。這時候我們需要在關閉彈框的公共方法中手動呼叫history.back()來避免這種情況的出現。
下面上程式碼：
componentWillMount() { this.addEventHandler(); }componentWillUnmount() { this.removeEventHandler(); }
addEventHandler() { window.addEventListener('popstate', this.closeModal, false); history.pushState({}, '') }
removeEventHandler() { window
closeModal = (e) => { if (!e) { window.removeEventListener('popstate', this.closeModal, false); history.back() } }