做者:zccst
舊版:
forword()
backword()
go(number)
HTML5中新增了
onhashchange 瀏覽器兼容性較好,用得較多
pushState / replaceState / onpopState
1、onhashchange
hashchange事件在當前頁面URL中的hash值發生改變時觸發 (查看location.hash).
區別:
經過window.onpopstate來監聽url的變化,但會忽略URL的hash部分。
結論:二者偏偏互補,各有分工。
javascript
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操做。 html