近來在處理瀏覽器禁刷功能時，用到一個新屬性：history.pushState()；
官方解釋如下:
history.pushState()方法和history.replaceState()方法，它們允許你逐條地添加和修改歷史記錄條目。這些方法可以協同window.onpopstate事件一起工作。
使用 history.pushState() 會改變 referrer 的值，而在你調用方法後創建的 XMLHttpRequest 對象會在 HTTP 請求頭中使用這個值。referrer的值則是創建 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】的基礎語法區別：
history.pushState(state, title, url)
將當前URL和history.state加入到history中，並用新的state和URL替換當前。
不會造成頁面刷新。
state：與要跳轉到的URL對應的狀態信息。
title：可以不傳
url：要跳轉到的URL地址，不能跨域。
history.replaceState(state, title, url)
用新的state和URL替換當前。
不會造成頁面刷新。
state：與要跳轉到的URL對應的狀態信息。
title：可以不傳
url：要跳轉到的URL地址，不能跨域。
最大區別則在於：
pushState是添加歷史記錄的，而replaceState是不添加的。
接下來開始講解兩者之間的語法分析：
1、實例
假設 http://mozilla.org/foo.html 將執行如下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，並且頁面會觸發popstate事件，該事件中的狀態對象（state object）包含stateObj的一個拷貝。該頁面看起來像foo.html，儘管頁面內容可能在popstate事件中被修改。
如果我們再次點擊後退按鈕，URL將變回http://mozilla.org/foo.html，文檔將觸發另一個popstate事件，這次的狀態對象爲null。回退同樣不會改變文檔內容。
2、pushState()方法：添加和修改歷史記錄條目
①語法：
history.pushState(state, title, url);
pushState()有三個參數：一個狀態對象、一個標題（現在會被忽略），一個可選的URL地址。下面來單獨考察這三個參數的細節：
狀態對象（state object） — 一個JavaScript對象，與用pushState()方法創建的新歷史記錄條目關聯。無論何時用戶導航到新創建的狀態，popstate事件都會被觸發，並且事件對象的state屬性都包含歷史記錄條目的狀態對象的拷貝。
任何可序列化的對象都可以被當做狀態對象。因爲FireFox瀏覽器會把狀態對象保存到用戶的硬盤，這樣它們就能在用戶重啓瀏覽器之後被還原，我們強行限制狀態對象的大小爲640k。如果你向pushState()方法傳遞了一個超過該限額的狀態對象，該方法會拋出異常。如果你需要存儲很大的數據，建議使用sessionStorage或localStorage。
標題（title） — FireFox瀏覽器目前會忽略該參數，雖然以後可能會用上。考慮到未來可能會對該方法進行修改，傳一個空字符串會比較安全。或者，你也可以傳入一個簡短的標題，標明將要進入的狀態。
地址（URL） — 新的歷史記錄條目的地址。瀏覽器不會在調用pushState()方法後加載該地址，但之後，可能會試圖加載，例如用戶重啓瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當前URL爲基準；傳入的URL與當前URL應該是同源的，否則，pushState()會拋出異常。該參數是可選的；不指定的話則爲文檔當前URL。
②樣例
創建了一個新的由 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);③優勢
某種意義上，調用pushState()有點類似於設置window.location='#foo'，它們都會在當前文檔內創建和激活新的歷史記錄條目。但pushState()有自己的優勢：
新的URL可以是任意的同源URL，與此相反，使用window.location方法時，只有僅修改 hash 才能保證停留在相同的document中。
根據個人需要來決定是否修改URL。相反，設置window.location='#foo'，只有在當前hash值不是foo時才創建一條新歷史記錄。
你可以在新的歷史記錄條目中添加抽象數據。如果使用基於hash的方法，你只能把相關數據轉碼成一個很短的字符串。
注意：pushState()方法永遠不會觸發hashchange事件，即便新的地址只變更了hash。
3、replaceState()方法：修改瀏覽器當前歷史記錄條目
history.replaceState()操作類似於history.pushState()，不同之處在於replaceState()方法會修改當前歷史記錄條目而並非創建新的條目。
當你爲了響應用戶的某些操作，而要更新當前歷史記錄條目的狀態對象或URL時，使用replaceState()方法會特別合適。
4、popstate事件
每當激活的歷史記錄發生變化時，都會觸發popstate事件。如果被激活的歷史記錄條目是由pushState所創建，或是被replaceState方法影響到的，popstate事件的狀態屬性將包含歷史記錄的狀態對象的一個拷貝。
調用history.pushState()或者history.replaceState()不會觸發popstate事件. popstate事件只會在其他瀏覽器操作時觸發, 比如點擊後退按鈕(或者在JavaScript中調用history.back()方法).
當網頁加載時,各瀏覽器對popstate事件是否觸發有不同的表現,Chrome 和 Safari會觸發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 變爲 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對象關聯的那些網頁, popstate事件也仍然會被觸發.
5、讀取當前狀態
在頁面加載時，可能會包含一個非空的狀態對象。這種情況是會發生的，例如，如果頁面中使用pushState()或replaceState()方法設置了一個狀態對象，然後用戶重啓了瀏覽器。當頁面重新加載時，頁面會觸發onload事件，但不會觸發popstate事件。但是，如果你讀取 history.state 屬性，你會得到一個與 popstate 事件觸發時得到的一樣的狀態對象。
你可以直接讀取當前歷史記錄條目的狀態，而不需要等待popstate事件：
var currentState = history.state;
6、瀏覽器兼容性