window.history

做者：zccst 





舊版： 
forword() 
backword() 
go(number) 


HTML5中新增了 
onhashchange  瀏覽器兼容性較好，用得較多 
pushState / replaceState / onpopState 



1、onhashchange 
hashchange事件在當前頁面URL中的hash值發生改變時觸發 (查看location.hash). 

區別： 
經過window.onpopstate來監聽url的變化，但會忽略URL的hash部分。 

結論：二者偏偏互補，各有分工。 

if ("onhashchange" in window) {
    alert("該瀏覽器支持hashchange事件!");
}

function locationHashChanged() {
    if (location.hash === "#somecoolfeature") {
        somecoolfeature();
    }
}

window.onhashchange = locationHashChanged;

hashchange 事件對象有下面兩個屬性 
newURL DOMString 當前頁面新的URL 
oldURL DOMString 當前頁面舊的URL 




2、pushState / replaceState / onpopState 


（通俗易懂版） 
HTML5的新API擴展了window.history，使歷史記錄點更加開放了。能夠存儲當前歷史記錄點、替換當前歷史記錄點、監聽歷史記錄點，下面逐一簡要說明一下。 

一、存儲當前歷史記錄點 

存儲的方式相似於數組的入棧（Array.push()），在window.history裏新增一個歷史記錄點，例如： 

// 當前的url爲：http://qianduanblog.com/index.html 
var json={time:new Date().getTime()}; 
// @狀態對象：記錄歷史記錄點的額外對象，能夠爲空 
// @頁面標題：目前全部瀏覽器都不支持 
// @可選的url：瀏覽器不會檢查url是否存在，只改變url，url必須同域，不能跨域 
window.history.pushState(json,"","http://qianduanblog.com/post-1.html"); 
執行了pushState方法後，頁面的url地址爲http://qianduanblog.com/post-1.html。 

二、替換當前歷史記錄點 

window.history.replaceState和window.history.pushState相似，不一樣之處在於replaceState不會在window.history裏新增歷史記錄點，其效果相似於window.location.replace(url)，都是不會在歷史記錄點裏新增一個記錄點的。當你爲了響應用戶的某些操做，而要更新當前歷史記錄條目的狀態對象或URL時，使用replaceState()方法會特別合適。 

三、監聽歷史記錄點 

監聽歷史記錄點，直觀的可認爲是監聽URL的變化，但會忽略URL的hash部分，監聽URL的hash部分，HTML5有新的API爲onhashchange，個人博客裏也有說到該方法和跨瀏覽器的兼容解決方案。能夠經過window.onpopstate來監聽url的變化，而且能夠獲取存儲在該歷史記錄點的狀態對象，也就是上文說到的json對象，如： 

// 當前的url爲：http://qianduanblog.com/post-1.html 
window.onpopstate=function() 
{ 
// 得到存儲在該歷史記錄點的json對象 
var json=window.history.state; 
// 點擊一次回退到：http://qianduanblog.com/index.html 
// 得到的json爲null 
// 再點擊一次前進到：http://qianduanblog.com/post-1.html 
// 得到json爲{time:1369647895656} 
} 
值得注意的是：javascript腳本執行window.history.pushState和window.history.replaceState不會觸發onpopstate事件。 









（文縐縐版） 
HTML5引進了history.pushState()方法和history.replaceState()方法，它們容許你逐條地添加和修改歷史記錄條目。這些方法能夠協同window.onpopstate事件一塊兒工做。 


1，pushState() 
某種意義上，調用pushState()有點相似於設置window.location='#foo'，它們都會在當前文檔內建立和激活新的歷史記錄條目。但pushState()有本身的優點： 

新的URL能夠是任意的同源URL，與此相反，使用window.location方法時，只有僅修改 hash 才能保證停留在相同的document中。 
根據我的須要來決定是否修改URL。相反，設置window.location='#foo'，只有在當前hash值不是foo時才建立一條新歷史記錄。 
你能夠在新的歷史記錄條目中添加抽象數據。若是使用基於hash的方法，你只能把相關數據轉碼成一個很短的字符串。 
注意pushState()方法永遠不會觸發hashchange事件，即使新的地址只變動了hash。 


2，replaceState()方法 
history.replaceState()操做相似於history.pushState()，不一樣之處在於replaceState()方法會修改當前歷史記錄條目而並不是建立新的條目。 

當你爲了響應用戶的某些操做，而要更新當前歷史記錄條目的狀態對象或URL時，使用replaceState()方法會特別合適。 

3，popstate事件 

每當激活的歷史記錄發生變化時，都會觸發popstate事件。若是被激活的歷史記錄條目是由pushState所建立，或是被replaceState方法影響到的，popstate事件的狀態屬性將包含歷史記錄的狀態對象的一個拷貝。 


舉例： 
history.pushState 
菊花插一刀之意，用法舉例： 
history.pushState({}, "頁面標題", "xxx.html"); 
history.pushStatehistory.replaceState 
換把菊花刀之意，用法舉例： 
history.replaceState(null, "頁面標題", "xxx.html"); 
window.onpopstate 
在菊花刀拔插的時候……，用法舉例： 
window.addEventListener("popstate", function() { 
    var currentState = history.state; 
    /* 
     * 該幹嗎幹嗎 
    */
}); 

完整實例： 
http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/ 

策略以下： 
每次手動點擊左側的菜單，我將Ajax地址的查詢內容(?後面的)附在demo HTML頁面地址後面，使用history.pushState塞到瀏覽器歷史中。 
瀏覽器的前進與後退，會觸發window.onpopstate事件，經過綁定popstate事件，就能夠根據當前URL地址中的查詢內容讓對應的菜單執行Ajax載入，實現Ajax的前進與後退效果。 
頁面首次載入的時候，若是沒有查詢地址、或查詢地址不匹配，則使用第一個菜單的Ajax地址的查詢內容，並使用history.replaceState更改當前的瀏覽器歷史，而後觸發Ajax操做。