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

標籤：奇葩   允許   ons   event   ati   dev   list   nbsp   url   

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

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