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。