利用popstate事件和window下的history對象處理瀏覽器跳轉問題

引子

以前，偶爾在項目中用過history接口作返回上一頁功能，當時是用的history.go(-1)，前幾天面試中遇到一個控制瀏覽器跳轉的問題時有點懵，特地查了文檔記錄一下，而且列出一些目前能想到的應用：

popstate事件

文檔地址

當活動歷史記錄條目更改時，將觸發popstate事件。若是被激活的歷史記錄條目是經過對history.pushState（）的調用建立的，或者受到對history.replaceState（）的調用的影響，popstate事件的state屬性包含歷史條目的狀態對象的副本。

就我目前的認識來看，不管是瀏覽器的前進仍是後退都會觸發這個popstate事件，因此只能起到一個監聽頁面變化的做用。

History 接口

• 屬性
  • History.length 表示歷史會話中元素的數目
  • History.scrollRestoration 容許Web應用程序在歷史導航上顯式地設置默認滾動恢復行爲。此屬性能夠是自動的（auto）或者手動的（manual）。
  • History.state 返回一個表示歷史堆棧頂部的狀態的值。這是一種能夠沒必要等待popstate 事件而查看狀態而的方式。
• 方法

  • History.back()

    等同於history.go(-1)

  • History.forward()

    等同於historygo(1)

  • History.go()

    這個方法中若是參數超出範圍或者不對就不會起效果

  • History.pushState()

    pushState() 帶有三個參數：一個狀態對象，一個標題（如今被忽略了），以及一個可選的URL地址。下面將對這三個參數進行細緻的檢查

  function pushHistory() {  
    var state = {  
      title: "title",  
      url: "#"  
    };  
    window.history.pushState(state, "title", "#xx");  
   }

  其餘方法就不一一列舉了，感興趣的看文檔

  監聽瀏覽器返回按鈕

  function pushHistory() {  
    var state = {  
      title: "title",  
      url: "#"  
    };  
    window.history.pushState(state, "title", "#xx");  
  }
  pushHistory();
  window.addEventListener("popstate", function(e) {  
    console.log(e);
    alert("我監聽到了瀏覽器的返回按鈕事件啦");//根據本身的需求實現本身的功能  
  }, false);

  這個地方就監聽了瀏覽器的返回事件，但我有個疑問，若是不先pushState一個地址就監聽不到，直接跳轉了，這個暫時沒搞懂，有知道的小夥伴能夠留言討論一下。

  禁止返回上一頁的一種方案

  history.pushState(null, null, document.URL);
  window.addEventListener("popstate",function(e) {  
    console.log(e);
    history.pushState(null, null, document.URL);
  }, false);

  這個其實就是利用pushState向瀏覽歷史列表中插入當前頁面，在點擊後退前和點擊時都插入一次，那樣不管點前進仍是後退永遠都會留在這個頁面了

若是你們還有什麼關於利用history接口和popstate結合控制頁面跳轉的實際應用案例，歡迎留言討論交流！