（一）HTML5 - pushState 無刷新更新地址

可以解決什么問題：

可以實現網頁的ajax加載，同時又能完成URL的改變而沒有網頁跳轉刷新的跡象，就像是改變了網頁的hash（＃）一樣。

優於hash：

避免了改變hash的問題，避免了用戶不理解URL的形式感到疑惑，同時還有onpopstate提供監聽，良好響應后退前進。而且它不需要這個URL真實存在。

HTML5 的 pushState+Ajax：

pushState() 的基本參數是：

var state = ( {
url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE
} );
window.history.pushState(state, ~title, ~href);
window.history.replaceState( state, ~title, ~href);    // 替換

pushState、replaceState 的區別

pushState()可以創建歷史，可以配合popstate事件，而replaceState()則是替換掉當前的URL，不會產生歷史。

注：

只能用同域的URL替換，例如你不能用http://baidu.com去替換http://google.com。

state對象不存儲不可序列化的對象如DOM。

pushState 配合 popstate 監聽

window.addEventListener('popstate', function(evt){
    var state = evt.state;
    var tilte = state.tilte ;
    var url = state.url
    document.title=title;
    doSomething(url);  // 自定義函數
}, false);

popstate與hashChange

對於http://www.abc.com/path?search=ghj#hashstring 這個url來說，

① http://為協議
② www.abc.com為host
③ path為path，也就是我們的子目錄，每個子目錄可以干很多事情
④ #hashstring為hash相關

①-③頁面會刷新，④頁面不刷新，

pushState與改變hash 相同點：可以改變url地址

pushState與改變hash 不同點：hashChange只能改變hashstring 部分，pushState可改變①-③而不刷新頁面

popstate 為1-3環節的變化引起的回調
hashChange 為hash變化引起的回調，是不同的

 

實例應用 - 劫持后退按鈕

(function(window, location) {
history.replaceState(null, document.title, location.pathname+"#!/stealingyourhistory");
history.pushState(null, document.title, location.pathname);
window.addEventListener("popstate", function() {
if(location.hash === "#!/stealingyourhistory") {
history.replaceState(null, document.title, location.pathname);
setTimeout(function(){
location.replace("http://www.baidu.com/");
},0); } }, false);  }(window, location));