單頁應用(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() } }