監聽瀏覽器返回操作

一、總結

一句話總結：

注意先要pushState一個地址，不然就監聽不到

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

 

 

1、popstate事件 是什么？

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

瀏覽器的前進和后退都會觸發這個popstate事件，所以能起到一個監聽頁面變化的作用。

 

2、History.pushState()怎么使用？

pushState() 帶有三個參數：一個狀態對象，一個標題（現在被忽略了），以及一個可選的URL地址。

window.history.pushState(state, "title", "#xx");

 

3、禁止返回上一頁的一種方案？

利用pushState向瀏覽歷史列表中插入當前頁面，在點擊后退前和點擊時都插入一次，那樣無論點前進還是后退永遠都會留在這個頁面了

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

 

 

 

 

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

轉自或參考：利用popstate事件和window下的history對象處理瀏覽器跳轉問題
https://www.cnblogs.com/wancheng7/p/8542544.html

 

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