/*Returns thenumberof entries in the joint sessionhistory.*/
window .history. length
/*Returns the current state object.*/
window .history. state
/*Goes backorforward the specifiednumberof steps in the joint sessionhistory.A zero delta will reload the current page.If the deltaisout ofrange, does nothing.*/
window .history.go( [ delta ] )
/*Goes back one step in the joint sessionhistory.If thereisnopreviouspage, does nothing.*/
window .history. back()
/*Goes forward one step in the joint sessionhistory.If thereisnonextpage, does nothing.*/
window .history. forward()
/*Pushes the given data onto the sessionhistory, with the given title,and,ifprovidedandnot null, the given URL.*/
window .history. pushState(data, title [url] )
/*Updates the current entry in the sessionhistorytohave the given data, title,and,ifprovidedandnot null, URL.*/
window .history. replaceState(data, title [url] )
history.pushState和history.replaceState域那，這兩個history新增的api，為前端操控瀏覽器歷史棧提供了可能性
/***parameters*@data{object} state對象败许，這是一個javascript對象淑蔚，一般是JSON格式的對象
*字面量。
*@title{string} 可以理解為document.title醋寝，在這里是作為新頁面?zhèn)魅雲(yún)?shù)的带迟。
*@url{string} 增加或改變的記錄，對應(yīng)的url嗅绰，可以是相對路徑或者絕對路徑，
*url的具體格式可以自定貌夕。
*/
history.pushState(data, title, url)//向瀏覽器歷史棧中增加一條記錄民镜。
history.replaceState(data, title, url)//替換歷史棧中的當(dāng)前記錄。
這兩個Api都會操作瀏覽器的歷史棧们童，而不會引起頁面的刷新鲸鹦。不同的是，pushState會增加一條新的歷史記錄齐板，而replaceState則會替換當(dāng)前的歷史記錄葛菇。所需的參數(shù)相同，在將新的歷史記錄存入棧后济舆，會把傳入的data（即state對象）同時存入莺债，以便以后調(diào)用。同時椎侠，這倆api都會更新或者覆蓋當(dāng)前瀏覽器的title和url為對應(yīng)傳入的參數(shù)侄旬。
來自mozilla有一個應(yīng)用pushState和replaceState小demo大家可以看一下：
varcurrentPage =5;// prefilled by server！！ｈ邓小！
functiongo(d){? ? setupPage(currentPage + d);? ? history.pushState(currentPage,document.title,'?x='+ currentPage); }?
onpopstate =function(event){? ? setupPage(event.state); }
functionsetupPage(page){? ??
?currentPage = page;
document.title ='Line Game - '+ currentPage;
document.getElementById('coord').textContent = currentPage;
document.links[0].href ='?x='+ (currentPage+1);
document.links[0].textContent ='Advance to '+ (currentPage+1);
document.links[1].href ='?x='+ (currentPage-1);document.links[1].textContent ='retreat to '+ (currentPage-1); }
了解這倆api還不夠族操，再來看下上邊的demo中涉及到的popstate事件色难，我擔(dān)心解釋的不到位，所以看看mozilla官方文檔的解釋：
An eventhandlerforthe popstateeventonthe window.A popstateeventisdispatchedtothe window everytimethe active history entry changesbetweentwo history entriesforthe same document.Ifthe history entry being activated was createdbyacalltohistory.pushState()orwas affectedbyacalltohistory.replaceState(), the popstateevent's state property contains a copy of the history entry's state object.Note that justcallinghistory.pushState()orhistory.replaceState() won't trigger apopstate event. The popstate event is only triggered by doing a browser action such as clicking on the back button (or calling history.back() in JavaScript). And the event is only triggered when the user navigates between two history entries for the same document.Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't.Syntax? ?
?window.onpopstate = funcRef;? ? //funcRef is ahandlerfunction.
簡而言之娇昙，就是說當(dāng)同一個頁面在歷史記錄間切換時冒掌，就會產(chǎn)生popstate事件蹲盘。正常情況下，如果用戶點擊后退按鈕或者開發(fā)者調(diào)用：history.back() or history.go()铃诬，頁面根本就沒有處理事件的機(jī)會苍凛，因為這些操作會使得頁面reload。所以popstate只在不會讓瀏覽器頁面刷新的歷史記錄之間切換才能觸發(fā)毫深，這些歷史記錄一般由pushState/replaceState或者是由hash錨點等操作產(chǎn)生。并且在事件的句柄中可以訪問state對象的引用副本钉寝！而且單純的調(diào)用pushState/replaceState并不會觸發(fā)popstate事件闸迷。頁面初次加載時，知否會主動觸發(fā)popstate事件逮走，不同的瀏覽器實現(xiàn)也不一樣今阳。下邊是官方的一個demo：
window.onpopstate =function(event) {
?alert("location: "+ document.location +", state: "+? JSON.stringify(event.state));
};
history.pushState({page:1},"title 1","?page=1");
history.pushState({page:2},"title 2","?page=2");
history.replaceState({page:3},"title 3","?page=3");
history.back(); // alerts"location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts"location: http://example.com/example.html, state: null
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
H5還新增了一個hashchange事件盾舌，也是很有用途的一個新事件：
(function(window){// 如果瀏覽器不支持原生實現(xiàn)的事件，則開始模擬窿锉，否則退出。
if("onhashchange"inwindow.document.body ) {return; }
var location =window.location, oldURL = location.href, oldHash = location.hash;// 每隔100ms檢查hash是否發(fā)生變化
setInterval(function(){
varnewURL = location.href,? ? newHash = location.hash;// hash發(fā)生變化且全局注冊有onhashchange方法（這個名字是為了和模擬的事件名保持統(tǒng)一）窑多；
if( newHash != oldHash &&typeofwindow.onhashchange ==="function") {// 執(zhí)行方法
window.onhashchange({type:"hashchange",oldURL: oldURL,newURL: newURL? ? ? ? });? ? ? ??
?oldURL = newURL;? ? ? ? oldHash = newHash;? ? } },100);})(window);
更多 --->
