HTML5 History對象，Javascript修改地址欄而不刷新頁面

一、History對象

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

History 對象是 window 對象的一部分，可通過 window.history 屬性對其進(jìn)行訪問。

注釋：沒有應(yīng)用于 History 對象的公開標(biāo)準(zhǔn)，不過所有瀏覽器都支持該對象。

IE: Internet Explorer, F: Firefox, O: Opera.

1. History 對象屬性

2.  History 對象方法

 在Html5中新增了history.pushState()和history.replaceState()兩個方法，他們允許添加和修改history實體。

同時，這些防范和window.onpopstate事件一起工作。支持IE10+，Google，F(xiàn)F

pushState()方法

pushState()有三個參數(shù):state對象，標(biāo)題(現(xiàn)在是被忽略，未作處理)，URL(可選)。具體細(xì)節(jié)：

· state對象 –state對象是一個JavaScript對象，它關(guān)系到由pushState()方法創(chuàng)建出來的新的history實體。用以存儲關(guān)于你所要插入到歷史 記錄的條目的相關(guān)信息。State對象可以是任何Json字符串。因為firefox會使用用戶的硬盤來存取state對象，這個對象的最大存儲空間為640k。如果大于這個數(shù) 值，則pushState()方法會拋出一個異常。如果確實需要更多的空間來存儲，請使用本地存儲。

· title—firefox現(xiàn)在回忽略這個參數(shù)，雖然它可能將來會被使用上。而現(xiàn)在最安全的使用方式是傳一個空字符串，以防止將來的修改?；蛘呖梢詡饕粋€簡短的標(biāo)題來表示state

· URL—這個參數(shù)用來傳遞新的history實體的URL，注意瀏覽器將不會在調(diào)用pushState()方法后加載這個URL。但也許會過一會嘗試加載這個URL。比如在用戶重啟了瀏覽器后，新的url可以不是絕對路徑。如果是相對路徑，那么它會相對于現(xiàn)有的url。新的url必須和現(xiàn)有的url同域，否則pushState()將拋出異常。這個參數(shù)是選填的，如果為空，則會被置為document當(dāng)前的url。

replaceState()方法

用法和pushState()一樣，只是它用來更新當(dāng)前state對象和當(dāng)前history實體的url。

popstate事件

當(dāng)history實體被改變時，popstate事件將會發(fā)生。如果history實體是有pushState和replaceState方法產(chǎn)生的，popstate事件的state屬性會包含一份來自history實體的state對象的拷貝，

當(dāng)你瀏覽會話歷史記錄時，不管你是點擊前進(jìn)或者后退按鈕，還是使用history.go和history.back方法，popstate都會被觸發(fā)。

詳見window.onpopstate

 讀取當(dāng)前state

當(dāng)頁面加載時，它可能會有一個非空的state對象。這可能發(fā)生在當(dāng)頁面設(shè)置一個state對象(使用pushState或者replaceState)之后用戶重啟了瀏覽器。當(dāng)頁面重新加載，頁面將收到onload事件，但不會有popstate事件。

1.直接使用history.state屬性讀取

2.在popstate事件觸發(fā)后獲取state對象event.state

實例1：

$('#btnOne').click(function () {   
 var stateObject = {};    var title = "修改地址";    
 var newUrl = '/view/fontface4.html';    //修改地址欄中的地址    
 history.pushState(stateObject, title, newUrl);
});
$('#btnTwo').click(function () {    //獲取操作歷史記錄    console.info(history.length);
});

實例2：

$('#btnOne').click(function () {   
   for (var i = 0; i < 5; i++) {        
     var stateObject = { id: i };        
     var title = "修改地址" + i;        
     var newUrl = '/view/fontface4.html#' + i;        //修改地址欄中的地址       
     history.pushState(stateObject, title, newUrl);
    }
});
$('#btnTwo').click(function () {    //獲取操作歷史記錄    
    console.info(history.length);
});
window.addEventListener('popstate', function (event) {
    console.info(event);
    console.info(event.state);
    console.info(event.state.id);
});