最近在項目中遇到登錄頁面進(jìn)行跳轉(zhuǎn)到主頁，退出登錄跳轉(zhuǎn)到登錄界面等，發(fā)現(xiàn)瀏覽器默認(rèn)的后退按鈕很是蛋疼，因為項目上是盡量前端去保存用戶狀態(tài)，沒有后臺進(jìn)行session校驗，故跳轉(zhuǎn)的時候要注意的是后退按鈕的禁用，找了幾種方法，感覺不錯，分享出來。

①在IE9及其以上，各種主流瀏覽器上
使用瀏覽器history這個api，HTML5中新引入的pushState（）和 replaceState（）方法則是首選。 由于兩者作用差不多，只講其中一種pushState（）
使用方法：history.pushState(stateObject,title,URL)
pushState是一個歷史記錄的管理的方法，其中stateObject是一個對象，存儲于這條歷史相關(guān)的狀態(tài)信息，通常寫為null即可，title取標(biāo)題，也取null，URL是URL的歷史記錄的意思，即給這個窗口的歷史記錄添加一個URL，并不是會頁面進(jìn)行跳轉(zhuǎn)的意思。具體使用如下：

image.png

之后動態(tài)去監(jiān)控popstate的后退或者前進(jìn)內(nèi)容，觸發(fā)的時候調(diào)用history.pushState(stateObject,title,URL)，那么做到用戶后退時一直進(jìn)去的是我們添加的那個歷史記錄里。

②IE9以下的低版本瀏覽器
這類瀏覽器沒有pushState（）方法，也做不到動態(tài)監(jiān)控popstate的內(nèi)容了，此時的瀏覽器只有hash哈希地址的變化的監(jiān)控（瀏覽器的url后用#接地址來完成頁面變化的方式），此時操控瀏覽器的歷史通過window.location.hash來完成，具體如下

image.png

在一開始的時候固定一個哈希，在瀏覽器的后退或前進(jìn)時url發(fā)生改變時，那么利用window.onhashchange事件監(jiān)聽變化，再進(jìn)行固定即可。

經(jīng)過以上兩種方法，可以解決禁用后退功能按鈕的問題

個人項目上使用第一種

image.png