問題描述

我們在工作中常常遇到需要用ajax來顯示下一頁和上一頁，ajax可以不刷新頁面進行操作！但是，假如你想通過瀏覽器的歷史記錄返回上一頁和下一頁。那么ajax默認是做不到的！一般需求要歷史返回的時候，我們通常不使用ajax。但是呢，假如一個頁面中，只有一個地方是需要動態的上一頁下一頁，其他地方都是固定的，那么這種情況除了使用模板之外，我們使用ajax來操作顯得格外方便！那么如何解決ajax歷史記錄的返回和前進呢？今天我們就一起來學習一下！

js中history相關API普及
首先我們來看看history相關的API。

history.state
當前URL下對應的狀態信息。如果當前URL不是通過pushState或者replaceState產生的，那么history.state是null。

history.pushState(state, title, url)
將當前URL和history.state加入到history中，并用新的state和URL替換當前。不會造成頁面刷新。

state：與要跳轉到的URL對應的狀態信息。title：頁面的題目,假如沒有就穿空字符串就可以。url：要跳轉到的URL地址，不能跨域。

history.replaceState

用新的state和URL替換當前。不會造成頁面刷新。

state：與要跳轉到的URL對應的狀態信息。title：頁面的題目,假如沒有就穿空字符串就可以。url：要跳轉到的URL地址，不能跨域。

window.onpopstate

history.go和history.back（包括用戶按瀏覽器歷史前進后退按鈕）觸發，并且頁面無刷的時候（由于使用pushState修改了history）會觸發popstate事件，事件發生時瀏覽器會從history中取出URL和對應的state對象替換當前的URL和history.state。通過event.state也可以獲取history.state。
支持性判斷

if ('pushState' in history) {...}

相關代碼

假如我們動態的html代碼id是haorooms。

定義如下函數

function processAjaxData(obj, url){document.getElementById("haorooms").innerHTML = obj.html;document.title = obj.pageTitle;window.history.pushState({"html":obj.html,"pageTitle":obj.pageTitle},"", url);}

obj是后臺ajax返回來的數據,obj.html來替換動態haorooms下面的內容，頁面標題是返回的pageTitle標題。

而當有瀏覽者點擊瀏覽器“后退”或“前進”按鈕時，我們用下面的代碼來響應用戶的操作：

window.onpopstate = function(event){if(event.state){document.getElementById("haorooms").innerHTML = event.state.html;document.title = event.state.pageTitle;} };

兼容性

谷歌瀏覽器，火狐瀏覽器，Safafi瀏覽器、IE10+等現代瀏覽器都支持這種技術。假如你感興趣，可以試試！

其他場景的應用

歷史記錄操作方法應用很廣泛，我們在SPA頁面中廣發應用。當然，我們還有另外一個應用場景，場景如下：

點擊列表內容，彈窗顯示詳情，詳情中有一些介紹的鏈接，我們點擊鏈接再次跳轉到詳情的詳情！假如我們按歷史返回，只能返回列表，彈窗就不會顯示了，我們利用歷史記錄pushState，就可以實現彈窗跳轉到詳情的詳情，然后再返回到彈窗。操作方法就是：

window.history.pushState({"html": datahtml, pageTitle: titlehtml, id: id}, "", lurl);

把我們的數據存到pushState中，然后在頁面初始化的時候，綁定到頁面中。可以用

if ('pushState' in history && history.state) {//進行初始化頁面操作}

小問題

當我們每次點擊，都會存一個pushState，當我們列表返回的時候，我們期望的效果是列表的上一次記錄。那么我們用：

window.history.replaceState({"html": datahtml, pageTitle: titlehtml, id: id}, "", lurl);

每次都對歷史進行替換，而不是創建。就可以實現我們想要的效果！

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的ajax无刷新页面切换,历史记录后退前进解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。