javascript使用history api防止|阻止頁面后退

奇葩需求啥時候都會有，最近有個需求是不允許瀏覽器回退，但是所有頁面都是超鏈接跳轉，於是乎腦殼沒轉彎就回答了做不到，結果尼瑪被打臉了，這打臉的聲音太響，終於靜下心來看了下history api。

先上代碼：

// 防止頁面后退
// 頁面載入時使用pushState插入一條歷史記錄
history.pushState(null, null, document.URL.split("?")[0] + "?rand=" + Math.random());
console.log('刷新');
window.addEventListener('popstate', function(event) {
    console.log('回退');
    // 點擊回退時再向歷史記錄插入一條，以便阻止下一次點擊回退
    history.pushState(null, null, document.URL.split("?")[0] + "?rand=" + Math.random());
});

下面一步步來解釋：

history.pushState(state, title, url);

頁面載入時就使用history api插入一條歷史記錄，為啥要這一步呢，原因是onpopstate事件只能監聽pushState插入的歷史記錄，而a標簽跳轉的鏈接是不受監聽滴。
因此為了讓我們能監聽用戶點擊瀏覽器的回退操作or安卓的返回鍵，必須得加上這一步。

關於pushState方法三個參數

參數一：state，可以是字符串，也可以是一個JS對象，該參數設置的值在可以在響應onpopstate事件時event對象上獲取。

參數二：title，據說可以設置歷史記錄中的標題，然而親測沒什么卵用(firefox和chrome測試結果)，歷史記錄還是會取頁面上<title>標簽中的文字，不過可以在pushState之前設置document.title改變歷史記錄中的標題。

參數三：url，就是歷史記錄中的URL地址，沒太多用處，只是在地址欄使用，方便用戶復制，或者手動刷新。

 

window.addEventListener('popstate', function(event) {/* code */});

監聽用戶退回操作，必須是history api添加的歷史記錄才能響應事件。意思是history.pushState或者history.replaceState添加的才能響應。超鏈接或者location.href跳轉不受控制。

 

history.pushState(/* xxx */);

事件中的pushState方法，該方法作用就是在用戶點擊回退之后，再向歷史記錄中插入一條記錄，以便用戶下一次點擊回退還能攔截。

 

document.URL.split("?")[0] + "?rand=" + Math.random()

這一串的用處是在測試的時候方便看出地址欄變化，實際使用中不要rand后面這一串隨機數。

 

關於history api的說明，這兒就不做闡述，請自行Google。