pushState()、popstate事件配合ajax實現瀏覽器前進後退頁面局部刷新

最近研究pushState，看了網上的文章還是不怎麼會用，於是自己摸索着理解使用，終於實現局部刷新同時前進後退。

首先說說pushState()，這個函數將當前的url等信息加入history堆棧中；

當點擊瀏覽器的前進後退按鈕時，會觸發popstate事件，所以可以在onpopstate的時候使用ajax實現局部刷新前進後退。

我的方法(用jQuery)：

1、定義兩個函數

function ajaxLoad(){
//裏面加載ajax
};
function setState(){
var stateobj = ({//裏面存放url等信息，stateobj將作爲pushState()的第一個參數
url:url,
title:title
});
window.history.pushState(stateobj,null,url);//將當前url加入堆棧中
};

2、正常瀏覽使用ajax時

$('a').on('click',function(event){//假設點擊a標籤加載ajax
event.preventDefault();//防止跳轉
ajaxLoad();
setState();
});

3、onpopstate

window.addEventListener('popstate', function(event) {
var state = event.state;//取得目標url的state，這樣就可以通過state.url等方式訪問之前stateobj中的內容
ajaxLoad();
//注意：此處不要調用setState();了，因爲在歷史記錄堆棧中跳轉時不需要往堆棧中寫入數據
});

注意：

setState()的作用是往歷史記錄堆棧中添加一條記錄；

ajax載入進來的元素（如a、button標籤等）如有事件要在載入後重新綁定事件；

前端小白學習時所得，如有更好的方法歡迎討論，代碼寫得菜求輕噴~