多頁面網站禁用瀏覽器後退鍵

如標題所說，本文提供的方法適用於多頁面網站，如SPA單頁面應用等不適用。

利用window.onpopstate和window.history.pushState 控制瀏覽器後退鍵失效，下面說一下如何實現。

1.在你須要禁止瀏覽器後退鍵的頁面上加上下面的代碼：

<script>
$(document).ready(function(){
  //判斷當前瀏覽器是否支持history和pushState,據我測試當前大部分瀏覽器都支持
  if(window.history && window.history.pushState){
    window.history.pushState({},null,location.href);
  }
});
</script>

當你加上上面的代碼時，你發現當你點擊一次瀏覽器的後退鍵，頁面並無後退，你可能感受好像是解決問題了，可是當你再次點擊後退鍵時頁面仍是返回到上一頁面。

緣由是window.history.pushState()方法是向瀏覽器歷史添加了一個狀態，它有三個參數分別是，一個狀態對象（其實就是頁面的參數），一個標題（如今被忽略了），以及一個可選的URL地址。

當你在頁面上寫了window.history.pushState({},null,location.href);瀏覽器會在history中添加location.href，同時頁面並不跳轉，但你只加了一次，因此只對一次後退事件起做用。如何完全解決這個問題呢？還須要在全局增長onpopstate事件，詳情請看第2步。

2.在全局增長一個onpopstate事件，這裏我用的是匿名函數（固然也能夠直接寫）：

;(function(window,undefined){
  'use strict'
  //判斷當前瀏覽器是否支持history和pushState,據我測試當前大部分瀏覽器都支持
  if(window.history && window.history.pushState)
  {
    window.onpopstate = function(){
      window.history.pushState({},null,"");
      //window.history.forward(1);  這句我沒理解什麼意思，不加也能夠實現，因此註釋掉了
    }
  }
})(window);

這時你發現，在你的目標頁面上點擊瀏覽器回退鍵頁面不會跳轉了，問題解決。可是上面的代碼是什麼意思呢？

window.onpopstate事件會監聽瀏覽器的後退、前進按鈕（或者在JavaScript代碼中調用相似history.back()、history.forward()、history.go()方法），可是調用像 history.pushState() 或者history.replaceState() 不會觸發popstate事件。

因此咱們在全局中增長popstate監聽事件，一但用戶點擊後退按鈕時就會觸發這個方法，該方法會再次向histroy中添加一個連接，防止用戶再一次點擊後退按鈕。