類比瀏覽器後退事件

標籤：提示   win   有用   tor   turn   case   rip   cal   自訂   

      在工作中碰到一個需求：點擊瀏覽器的後退按鈕時，需要判斷當前頁面的表單資料是否已儲存；如果沒儲存，就給出提示。但瀏覽器並沒有後退事件，這個項目也沒有用什麼 MV** 之類的架構或庫，用的是 jQuery，於是只能嘗試類比瀏覽器後退事件。

      用的是 H5 中的 pushState 與 popstate，代碼如下：

var onBrowserBack = function(callback) {  var userAgent = navigator.userAgent.toLowerCase(),      isSafari = userAgent.indexOf(‘safari‘) > -1 && userAgent.indexOf(‘chrome‘) < 1,      referrer = document.referrer;  if (window.history && window.history.pushState) {    if (isSafari) {      window.onload = function() {        window.isLoaded = ‘isLoaded‘;      };    }    history.pushState(‘historyPushState‘, null, null);    window.onpopstate = function(event) {      history.pushState(null, null, null);      if (window.isLoaded === ‘isLoaded‘) {        window.isLoaded = ‘‘;      } else {        if (history.state === ‘historyPushState‘) {          history.forward(); // 自動“前進”一步，否則“前進”按鈕可點擊        } else {          if (typeof callback === ‘function‘ && callback(event) !== false) {            window.location.href = referrer;          }        }      }    };  }};

      popstate 事件會在使用者點擊瀏覽器（Chrome, Firefox, Safari）的“前進”和[上一頁] 按鈕時觸發，但在 Safari 中還多一種觸發的情況 ── load 頁面時也會觸發，例如由其它頁面跳轉過來，以及重新整理。因此，需要在 Safari 中排除這種情況，代碼裡用的是瀏覽器的使用者代理程式來檢測 Safari。

      調用：

onBrowserBack(function() {  console.log(‘popstate‘);    // 自訂跳轉到其它連結  window.location.href = ‘https://www.baidu.com‘;  return false;});

      如果要跳轉到其它頁面，需要用 js 手動跳轉。

      這種類比方式的問題在於，沒法點擊“前進”按鈕；並且，[上一頁] 按鈕只能回退到前一步，如果再點，就又回到了當前頁面（使用了 onBrowserBack 的頁面）。

類比瀏覽器後退事件