最近在項目中遇到登錄頁面進行跳轉到主頁诱桂,退出登錄跳轉到登錄界面等登刺,發(fā)現(xiàn)瀏覽器默認的后退按鈕很是蛋疼,因為項目上是盡量前端去保存用戶狀態(tài)蛀序,沒有后臺進行session校驗堪夭,故跳轉的時候要注意的是后退按鈕的禁用括袒,找了幾種方法毕莱,感覺不錯蔑鹦,分享出來逗概。
①在IE9及其以上弟晚,各種主流瀏覽器上
使用瀏覽器history這個api,HTML5中新引入的pushState()和 replaceState()方法則是首選逾苫。 由于兩者作用差不多卿城,只講其中一種pushState()
使用方法:history.pushState(stateObject,title,URL)
pushState是一個歷史記錄的管理的方法,其中stateObject是一個對象隶垮,存儲于這條歷史相關的狀態(tài)信息藻雪,通常寫為null即可,title取標題狸吞,也取null勉耀,URL是URL的歷史記錄的意思,即給這個窗口的歷史記錄添加一個URL蹋偏,并不是會頁面進行跳轉的意思便斥。具體使用如下:
之后動態(tài)去監(jiān)控popstate的后退或者前進內(nèi)容,觸發(fā)的時候調(diào)用history.pushState(stateObject,title,URL)威始,那么做到用戶后退時一直進去的是我們添加的那個歷史記錄里枢纠。
②IE9以下的低版本瀏覽器
這類瀏覽器沒有pushState()方法,也做不到動態(tài)監(jiān)控popstate的內(nèi)容了黎棠,此時的瀏覽器只有hash哈希地址的變化的監(jiān)控(瀏覽器的url后用#接地址來完成頁面變化的方式)晋渺,此時操控瀏覽器的歷史通過window.location.hash來完成,具體如下
在一開始的時候固定一個哈希脓斩,在瀏覽器的后退或前進時url發(fā)生改變時木西,那么利用window.onhashchange事件監(jiān)聽變化,再進行固定即可随静。
經(jīng)過以上兩種方法八千,可以解決禁用后退功能按鈕的問題
個人項目上使用第一種