因為ajax與瀏覽器的history.back()與forward()不友好,不能前進與后退,其解決辦法就是根據當前url地址中的查詢內容讓對應的菜單執行ajax載入即可。
本文操作環境:windows7系統、javascript1.8.5版、dell g3電腦。
ajax為什么不能后退?解決ajax無法后退問題實例
都知道ajax有一個明顯的缺點就是與瀏覽器的history.back()與forward()不友好,不能前進與后退。
實例地址:解決ajax無法后退問題實例
解決方法:
window.history實例
在console里面打印出window.history的實例,可以查看相關對象的原型。
length:length為瀏覽記錄隊列長度,由于這個頁面是新打開的,隊列中只有當前頁面鏈接相關信息,其值為1
state:
pushstate:就是window.history.pushstate();
replacestate:就是window.replacestate();
用法:
window.history.pushstate({status: 0} ,\’\’ ,\’?data=1\’);
改變后的瀏覽器地址
這里需要注意的是,如果實在本地運行的話,在ie和火狐上都是可以完美運行的,但是現在新版的谷歌會報錯,這是因為谷歌的安全機制問題。如果代碼放在服務器上的話應該是沒有這個錯誤的。
所以這里的解題思路:
1.每次手動點擊左側的菜單,我將ajax地址的查詢內容(?后面的)附在demo html頁面地址后面,使用history.pushstate塞到瀏覽器歷史中。
2.瀏覽器的前進與后退,會觸發window.onpopstate事件,通過綁定popstate事件,就可以根據當前url地址中的查詢內容讓對應的菜單執行ajax載入,實現ajax的前進與后退效果。
3.頁面首次載入的時候,如果沒有查詢地址、或查詢地址不匹配,則使用第一個菜單的ajax地址的查詢內容,并使用history.replacestate更改當前的瀏覽器歷史,然后觸發ajax操作。
推薦學習:《ajax視頻教程》
Windows系統命令行NET LOCALGROUP命令 新增 刪除更新 用戶組電腦office要給錢才能用嗎 電腦office價格介紹多枚拼音米結拍 “賽寶倫”六位數被秒電腦如何區分和轉換磁盤gpt和mbr網站域名怎么選有利于站點推廣優化cad無法復制到剪貼板怎么解決 cad復制到剪貼板的方法阿里云服務器轉為按小時收費偶爾無法訪問到云服務器怎么辦