HTML5新特性【pushState】和【replaceSt

近來在處理瀏覽器禁刷功能時，用到一個新屬性：history.pushState()；

官方解釋如下:

history.pushState()方法和history.replaceState()方法，它們允許你逐條地添加和修改歷史記錄條目。這些方法可以協(xié)同window.onpopstate事件一起工作。

使用 history.pushState() 會改變 referrer 的值，而在你調用方法后創(chuàng)建的 XMLHttpRequest 對象會在 HTTP 請求頭中使用這個值。referrer的值則是創(chuàng)建 XMLHttpRequest 對象時所處的窗口的URL。

首先附上一個實例功能：

        //防止瀏覽器后退功能
	$(document).ready(function(e) {	
		var url = window.location.href;
		var last = url.substring(url.lastIndexOf("/"));
		if (window.history && window.history.pushState) {
			$(window).on('popstate', function () {
			        //在IE中必須得有這兩行
				window.history.pushState('forward', null, url);
				window.history.forward(1);
			});
		}
		
		//屏蔽鼠標右鍵        
		$(document).bind("contextmenu",function(e){   
	          return false;   
	        });
		
		//屏蔽f5和回車功能      
		$(document).bind("keydown",function(e){   
			  if    (event.keyCode==116)            
	           {            
	                   event.keyCode    =    0;            
	                   event.cancelBubble    =   true;            
	                  return   false;            
	           }   
	    });
		
	});

以及附上【pushState】和【replaceState】的基礎語法區(qū)別：

history.pushState(state, title, url)     

將當前URL和history.state加入到history中，并用新的state和URL替換當前。

不會造成頁面刷新。  

 state：與要跳轉到的URL對應的狀態(tài)信息。  

 title：可以不傳  

 url：要跳轉到的URL地址，不能跨域。  

history.replaceState(state, title, url)     

用新的state和URL替換當前。

不會造成頁面刷新。  

 state：與要跳轉到的URL對應的狀態(tài)信息。  

 title：可以不傳  

 url：要跳轉到的URL地址，不能跨域。

最大區(qū)別則在于：

pushState是添加歷史記錄的，而replaceState是不添加的。

接下來開始講解兩者之間的語法分析：

1、實例

假設 http://mozilla.org/foo.html 將執(zhí)行如下JavaScript代碼：

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

這將讓瀏覽器的地址欄顯示http://mozilla.org/bar.html，但不會加載bar.html頁面也不會檢查bar.html是否存在。

假設現在用戶導航到了http://google.com，然后點擊了后退按鈕，此時，地址欄將會顯示http://mozilla.org/bar.html，并且頁面會觸發(fā)popstate事件，該事件中的狀態(tài)對象（state object）包含stateObj的一個拷貝。該頁面看起來像foo.html，盡管頁面內容可能在popstate事件中被修改。

如果我們再次點擊后退按鈕，URL將變回http://mozilla.org/foo.html，文檔將觸發(fā)另一個popstate事件，這次的狀態(tài)對象為null。回退同樣不會改變文檔內容。

2、pushState()方法：添加和修改歷史記錄條目

①語法：

history.pushState(state, title, url);

pushState()有三個參數：一個狀態(tài)對象、一個標題（現在會被忽略），一個可選的URL地址。下面來單獨考察這三個參數的細節(jié)：

狀態(tài)對象（state object） — 一個JavaScript對象，與用pushState()方法創(chuàng)建的新歷史記錄條目關聯(lián)。無論何時用戶導航到新創(chuàng)建的狀態(tài)，popstate事件都會被觸發(fā)，并且事件對象的state屬性都包含歷史記錄條目的狀態(tài)對象的拷貝。

任何可序列化的對象都可以被當做狀態(tài)對象。因為FireFox瀏覽器會把狀態(tài)對象保存到用戶的硬盤，這樣它們就能在用戶重啟瀏覽器之后被還原，我們強行限制狀態(tài)對象的大小為640k。如果你向pushState()方法傳遞了一個超過該限額的狀態(tài)對象，該方法會拋出異常。如果你需要存儲很大的數據，建議使用sessionStorage或localStorage。

標題（title） — FireFox瀏覽器目前會忽略該參數，雖然以后可能會用上。考慮到未來可能會對該方法進行修改，傳一個空字符串會比較安全?；蛘撸阋部梢詡魅胍粋€簡短的標題，標明將要進入的狀態(tài)。

地址（URL） — 新的歷史記錄條目的地址。瀏覽器不會在調用pushState()方法后加載該地址，但之后，可能會試圖加載，例如用戶重啟瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當前URL為基準；傳入的URL與當前URL應該是同源的，否則，pushState()會拋出異常。該參數是可選的；不指定的話則為文檔當前URL。

②樣例

創(chuàng)建了一個新的由 state, title, 和 url設定的瀏覽器歷史紀錄.

var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';
var url = 'hello-world.html';
history.pushState(state, title, url);

③優(yōu)勢

某種意義上，調用pushState()有點類似于設置window.location='#foo'，它們都會在當前文檔內創(chuàng)建和激活新的歷史記錄條目。但pushState()有自己的優(yōu)勢：

• 新的URL可以是任意的同源URL，與此相反，使用window.location方法時，只有僅修改 hash 才能保證停留在相同的document中。

• 根據個人需要來決定是否修改URL。相反，設置window.location='#foo'，只有在當前hash值不是foo時才創(chuàng)建一條新歷史記錄。

• 你可以在新的歷史記錄條目中添加抽象數據。如果使用基于hash的方法，你只能把相關數據轉碼成一個很短的字符串。

注意：pushState()方法永遠不會觸發(fā)hashchange事件，即便新的地址只變更了hash。

3、replaceState()方法：修改瀏覽器當前歷史記錄條目

history.replaceState()操作類似于history.pushState()，不同之處在于replaceState()方法會修改當前歷史記錄條目而并非創(chuàng)建新的條目。

當你為了響應用戶的某些操作，而要更新當前歷史記錄條目的狀態(tài)對象或URL時，使用replaceState()方法會特別合適。

4、popstate事件

每當激活的歷史記錄發(fā)生變化時，都會觸發(fā)popstate事件。如果被激活的歷史記錄條目是由pushState所創(chuàng)建，或是被replaceState方法影響到的，popstate事件的狀態(tài)屬性將包含歷史記錄的狀態(tài)對象的一個拷貝。

調用history.pushState()或者history.replaceState()不會觸發(fā)popstate事件. popstate事件只會在其他瀏覽器操作時觸發(fā), 比如點擊后退按鈕(或者在JavaScript中調用history.back()方法).

當網頁加載時,各瀏覽器對popstate事件是否觸發(fā)有不同的表現,Chrome 和 Safari會觸發(fā)popstate事件, 而Firefox不會.

①語法

window.onpopstate = funcRef;

funcRef 是個函數名.

②實例

假如當前網頁地址為http://example.com/example.html,則運行下述代碼后:

window.onpopstate = function (event) {
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//綁定事件處理函數. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一個歷史記錄條目 http://example.com/example.html?page=1,條目索引為1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一個歷史記錄條目 http://example.com/example.html?page=2,條目索引為2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改當前激活的歷史記錄條目 http://ex..?page=2 變?yōu)?nbsp;http://ex..?page=3,條目索引為3
history.back(); // 彈出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 彈出 "location: http://example.com/example.html, state: null
history.go(2);  // 彈出 "location: http://example.com/example.html?page=3, state: {"page":3}

即便進入了那些非pushState和replaceState方法作用過的(比如http://example.com/example.html)沒有state對象關聯(lián)的那些網頁, popstate事件也仍然會被觸發(fā).

5、讀取當前狀態(tài)

在頁面加載時，可能會包含一個非空的狀態(tài)對象。這種情況是會發(fā)生的，例如，如果頁面中使用pushState()或replaceState()方法設置了一個狀態(tài)對象，然后用戶重啟了瀏覽器。當頁面重新加載時，頁面會觸發(fā)onload事件，但不會觸發(fā)popstate事件。但是，如果你讀取 history.state 屬性，你會得到一個與  popstate 事件觸發(fā)時得到的一樣的狀態(tài)對象。

你可以直接讀取當前歷史記錄條目的狀態(tài)，而不需要等待popstate事件：

var currentState = history.state;

6、瀏覽器兼容性