利用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結合控制頁面跳轉的實際應用案例，歡迎留言討論交流！