HTML5 history新特性pushState、replaceState

DOM中的window對象經過window.history方法提供了對瀏覽器歷史記錄的讀取，讓你能夠在用戶的訪問記錄中前進和後退。

從HTML5開始，咱們能夠開始操做這個歷史記錄堆棧。

1.History

使用back(),forward(),和go()方法能夠在用戶的歷史記錄中前進和後退

前進和後退

後退：

window.history.back();

這個方法會像用戶點擊了瀏覽器工具欄上的返回鍵同樣。

一樣的，也能夠用如下方法產生用戶前進行爲：

window.history.forward();

移動到歷史記錄中特定的位置

你可使用go()方法從session歷史中載入特定的頁面。

向後移動一頁：

window.history.go(-1);

向前移動一頁：

window.history.go(1);

相似的，你能夠前進或者後退多頁。

還能夠經過檢查瀏覽器歷史記錄的length屬性來找到歷史記錄堆棧中的頁面總數。

var numberOfEntries = window.history.length;

注意:IE支持向go()方法傳URL參數。

 

2.添加和修改history實體

自Gecko2開始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5引入了histtory.pushState()和history.replaceState()這兩個方法，他們容許添加和修改history實體。同時，這些方法會和window.onpostate事件一塊兒工做。

使用history.pushState()方法來修改referrer,這種方法能夠被用在通過修改狀態後而爲xmlhttpRequest對象建立的http header中。這個referrer會是建立XMLHttpRequest 時document的URL。

pushState 用於向 history 添加當前頁面的記錄，而 replaceState 和 pushState 的用法徹底同樣，惟一的區別就是它用於修改當前頁面在 history 中的記錄。

例子

假設http://mozilla.org/foo.html頁面執行了一下JS

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");

這種方法將會使url地址欄顯示http://mozilla.org/bar.html，但瀏覽器不會加載bar.html頁面，即便這個頁面存在也不會加載。

如今再次假設用戶繼續訪問http://google.com，而後點擊後退。這時，url地址欄將會，http://mozilla.org/bar.html，頁面會獲得popstate事件（chrome），這個狀態對象會包含一個stateObj的copy。這個頁面看起來像foo.html。+

這時，咱們再次點擊後退，URL將變成http://mozilla.org/foo.html，document將獲得另外一個popstate事件和爲null的state對象。此次的返回動做並無改變文檔的內容。（也許會過一會嘗試加載…chrome）

pushState方法

pushState()有三個參數:state對象，標題(如今是被忽略，未做處理)，URL(可選)。具體細節：

·        state對象 –state對象是一個JavaScript對象，它關係到由pushState()方法建立出來的新的history實體。用以存儲關於你所要插入到歷史 記錄的條目的相關信息。State對象能夠是任何Json字符串。由於firefox會使用用戶的硬盤來存取state對象，這個對象的最大存儲空間爲640k。若是大於這個數 值，則pushState()方法會拋出一個異常。若是確實須要更多的空間來存儲，請使用本地存儲。

·        title—firefox如今回忽略這個參數，雖然它可能未來會被使用上。而如今最安全的使用方式是傳一個空字符串，以防止未來的修改。或者能夠傳一個簡短的標題來表示state

·        URL—這個參數用來傳遞新的history實體的URL，注意瀏覽器將不會在調用pushState()方法後加載這個URL。但也許會過一會嘗試加載這個URL。好比在用戶重啓了瀏覽器後，新的url能夠不是絕對路徑。若是是相對路徑，那麼它會相對於現有的url。新的url必須和現有的url同域，不然pushState()將拋出異常。這個參數是選填的，若是爲空，則會被置爲document當前的url。

某種意義上來講，調用pushState()方法很像設置了window.location = 「#foo」,這二者都會建立和激活另外一個關聯到當前document的history實體，但pushState()另外有一些優勢：

l 新的url能夠是任何和當前url同域的url，相比之下，若是隻設置hash，window.location會保持在同一個document。

l 若是不須要，你能夠不修改url。對比而言，設置window.location = 「#foo」;僅產生新的history實體，若是你當前的hash不是#foo

l 你能夠將任意的數據與你的新history實體關聯。使用基於hash的方法，須要將全部相關的數據編碼爲一個短字符串。

注意，pushState()方法不會使hashchange時間發生，即便是新舊url只是hash不一樣。

replaceState()方法

history.replaceState() 用起來很像pushState()，除了replaceState()是用來修改當前的history實體而不是建立一個新的。這個方法有時會頗有用，當 你須要對某些用戶行爲做反應而更新一個state對象或者當前history實體時，可使用它來更新state對象或者當前history實體的url。

popstate事件

當history實體被改變時，popstate事件將會發生。若是history實體是有pushState和replaceState方法產生的，popstate事件的state屬性會包含一份來自history實體的state對象的拷貝

詳見window.onpopstate

讀取當前的state

當頁面加載時，它可能會有一個非空的state對象。這可能發生在當頁面設置一個state對象(使用pushState或者replaceState)以後用戶重啓了瀏覽器。當頁面從新加載，頁面將收到onload事件，但不會有popstate事件。然而，若是你讀取history.state屬性，將在popstate事件發生後獲得這個state對象

var currentState = history.state;

Browsers: Tested and Working In

HTML5 Browsers

Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3

 

 

轉自:http://zhanchaojiang.iteye.com/blog/1462994

 

https://developer.mozilla.org/en-US/docs/Web/API/History_API

 

http://www.cnblogs.com/flash3d/archive/2013/10/23/3384823.html