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

BLUE 發布于2019-08-01 18:36 / 2670人閱讀

摘要：如標題所說，本文提供的方法適用于多頁面網站，如單頁面應用等不適用。利用和控制瀏覽器后退鍵失效，下面說一下如何實現。當你在頁面上寫了瀏覽器會在中添加，同時頁面并不跳轉，但你只加了一次，所以只對一次后退事件起作用。

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

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

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

當你加上上面的代碼時，你發現當你點擊一次瀏覽器的后退鍵，頁面并沒有后退，你可能感覺好像是解決問題了，但是當你再次點擊后退鍵時頁面還是返回到上一頁面。

原因是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中添加一個鏈接，防止用戶再一次點擊后退按鈕。

云服務器 GPU云服務器后退鍵 js屏蔽后退鍵頁面后退防止頁面后退

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51858.html

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

摘要：如標題所說，本文提供的方法適用于多頁面網站，如單頁面應用等不適用。利用和控制瀏覽器后退鍵失效，下面說一下如何實現。當你在頁面上寫了瀏覽器會在中添加，同時頁面并不跳轉，但你只加了一次，所以只對一次后退事件起作用。如標題所說，本文提供的方法適用于多頁面網站，如SPA單頁面應用等不適用。利用window.onpopstate和window.history.pushState 控制瀏覽器后...

Kerr1Gan 2019-08-26 11:48 評論0 收藏0
單頁面網站禁用瀏覽器后退鍵

摘要：項目上線后，客戶反應當頁面跳轉到級或級頁面，點擊瀏覽器后退鍵時，頁面返回上級頁面后提示缺少參數，頁面的數據也是空白的，為了解決這一問題，我的解決方案是禁用瀏覽器后退鍵，下面是解決方法在方法中，用監聽地址變化。該文章適用于angularjs創建的單頁面應用SPA，如vuejs或react.js不在本文討論范圍內。我用angularjs和sb-admin2實現了前端框架，在不考慮瀏覽器...

joywek 2019-08-01 18:38 評論0 收藏0
單頁面網站禁用瀏覽器后退鍵

摘要：項目上線后，客戶反應當頁面跳轉到級或級頁面，點擊瀏覽器后退鍵時，頁面返回上級頁面后提示缺少參數，頁面的數據也是空白的，為了解決這一問題，我的解決方案是禁用瀏覽器后退鍵，下面是解決方法在方法中，用監聽地址變化。該文章適用于angularjs創建的單頁面應用SPA，如vuejs或react.js不在本文討論范圍內。我用angularjs和sb-admin2實現了前端框架，在不考慮瀏覽器...

Scholer 2019-08-26 17:15 評論0 收藏0