當使用者開啟一個網頁時，想一直停留在當前開啟的頁面，如何禁止頁面前進和後退

王铁柱6發表於2024-12-08
網頁

禁止頁面前進和後退在前端開發中比較棘手，因為這涉及到使用者體驗和瀏覽器行為的控制，通常不推薦完全禁止。瀏覽器的前進後退按鈕是使用者瀏覽體驗的核心部分，禁用它們會讓使用者感到困惑和受限。

不過，根據你的需求，有一些方法可以嘗試，但效果和可靠性可能因瀏覽器而異：

1. 使用replaceState修改歷史記錄：

這是相對推薦的方法，它不會真正禁止前進後退，而是用當前頁面替換歷史記錄中的前一個頁面，從而使使用者點選後退按鈕時仍然停留在當前頁面。

window.onload = function() {
  // 在頁面載入時替換歷史記錄
  history.replaceState(null, null, window.location.href);

  // 監聽popstate事件，該事件在使用者點選前進後退按鈕時觸發
  window.addEventListener('popstate', function(event) {
    history.replaceState(null, null, window.location.href);
  });
};

這種方法的優點在於使用者體驗相對較好，不會完全禁用瀏覽器功能，只是改變了前進後退的行為。

2. 使用pushState建立新的歷史記錄，並監聽popstate： 類似於replaceState，但會在歷史記錄中新增一個新的狀態。

window.onload = function() {
    const currentState = history.state || {};
    currentState.page = 1;
    history.pushState(currentState, '', window.location.href);

    window.onpopstate = function(event) {
        history.pushState(currentState, '', window.location.href);
    };
};

3. (不推薦) 使用history.forward() 在popstate事件中：

這種方法在某些瀏覽器中可能有效，但在其他瀏覽器中可能被阻止。它試圖在使用者點選後退按鈕時立即前進到當前頁面。

window.onpopstate = function(event) {
  history.forward();
};

4. (非常不推薦) 禁用瀏覽器前進後退按鈕 (幾乎不可能且不推薦):

由於安全性和使用者體驗的考慮，瀏覽器通常不允許 JavaScript 直接禁用前進和後退按鈕。任何聲稱可以做到這一點的方法都可能不可靠，並且可能對使用者體驗產生負面影響。

總結:

最佳方法是使用replaceState。它在使用者體驗和功能性之間提供了最佳平衡。其他方法要麼不可靠，要麼對使用者不友好。 請記住，控制瀏覽器行為應該謹慎，始終優先考慮使用者體驗。 如果你的應用場景確實需要嚴格限制導航，請重新考慮設計，或許單頁應用 (SPA) 框架更適合你的需求。

相關文章