window.history詳解

History 物件

History 物件包含使用者（在瀏覽器視窗中）訪問過的 URL。

History 物件是 window 物件的一部分，可通過 window.history 屬性對其進行訪問。

註釋：沒有應用於 History 物件的公開標準，不過所有瀏覽器都支援該物件。

 

History 物件屬性

length:返回瀏覽器歷史列表中的 URL 數量。

 

History 物件方法

back()：載入 history 列表中的前一個 URL。即後退

forward():載入 history 列表中的下一個 URL。即前進

go():載入 history 列表中的某個具體頁面。這個是最常用的

 

History 物件最初設計來表示視窗的瀏覽歷史。但出於隱私方面的原因，History 物件不再允許指令碼訪問已經訪問過的實際 URL。

 

我們們來接著說兩個HTML5 history新增的好哥們：History.pushState()和History.replaceState()

 

history.pushState(state, title, url)

意思就是把一個history記錄插入到歷史記錄中。

state：與要跳轉到的URL對應的狀態資訊。

title：頁面標題。

url：要跳轉到的URL地址，不能跨域。

 

history.replaceState(state, title, url)

用新的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。

 

大致的思路就是自己建立一個物件記錄，然後把它插入到瀏覽器的歷史記錄，點選瀏覽器的前進後退按鈕會觸發onpopstate，然後判斷當前的記錄做對應的操作。

 

與傳統的AJAX的區別

傳統的ajax有如下的問題：

雖然ajax可以無重新整理改變頁面內容，但無法改變頁面URL

其次為了更好的可訪問性，內容發生改變後，改變URL的hash。但是hash的方式不能很好的處理瀏覽器的前進、後退等問題

有的瀏覽器引入了onhashchange的介面，不支援的瀏覽器只能定時去判斷hash是否改變

再有，ajax的使用對搜尋引擎很不友好，往往蜘蛛爬到的區域是空的

 

為了解決傳統ajax帶來的問題，HTML5裡引入了新的API，即：history.pushState, history.replaceState

可以通過pushState和replaceState介面操作瀏覽器歷史，並且改變當前頁面的URL。

pushState是將指定的URL新增到瀏覽器歷史裡，replaceState是將指定的URL替換當前的URL。

 

注意事項：

1、onpopstate只有在點選瀏覽器的前期和後退才會觸發；

2、pushState能夠改變瀏覽器位址列中的hash，但是它不會觸發hashchange事件，所以想通過監聽hashchange來執行是無效的。

3、pushState不會重新整理頁面，重新整理頁面我們就壓根不會用它了。