禁用“后退”按钮不会真正起作用的原因有很多。您最好警告用户：

window.onbeforeunload = function() { return "Your work will be lost."; };

此页面确实列出了许多您可以尝试禁用“后退”按钮的方法，但没有一种方法是可以保证的：
http://www.irt.org/script/311.htm

覆盖web浏览器的默认行为通常是个坏主意。出于安全原因，客户端脚本没有足够的权限执行此操作。
也有一些类似的问题被问到，
如何防止backspace键向后导航？
如何使用javascript防止浏览器对backspace按钮执行默认的历史后退操作？
实际上，您不能禁用“浏览器后退”按钮。但是，您可以使用您的逻辑来执行魔术，以防止用户向后导航，这将产生一种被禁用的印象。下面是操作方法-查看以下代码段。

(function (global) {

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // Making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {
        noBackPlease();

        // Disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // Stopping the event bubbling up the DOM tree...
            e.stopPropagation();
        };
    }
})(window);

这是在纯javascript中实现的，因此它可以在大多数浏览器中使用。它还将禁用退格键，但该键将在内部正常工作 input 田地和 textarea .

建议的设置：

将此代码段放在单独的脚本中，并将其包含在需要此行为的页面上。在当前设置中，它将执行 onload 事件，它是此代码的理想入口点。
工作演示！
在以下浏览器中进行了测试和验证，
铬。
火狐。
internet explorer（8-11）和edge。
游猎。

我遇到了这个问题，需要一个在各种浏览器上都能正常“很好”工作的解决方案，包括mobile safari（发布时的ios 9）。没有一个解决方案是完全正确的。我提供以下内容（在internet explorer 11、firefox、chrome和safari上测试）：

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

注意以下几点： history.forward() （我以前的解决方案）在移动safari上不起作用——它似乎什么都不起作用（即，用户仍然可以返回）。 history.pushState() 对所有这些都有效。
第三个论点是 history.pushState() 是一个url。传递类似字符串的解 'no-back-button' 或 'pagename' 似乎可以正常工作，直到您尝试刷新/重新加载页面，此时当浏览器尝试定位以该页面为url的页面时，会生成“未找到页面”错误(浏览器在页面上时也可能在地址栏中包含该字符串，这很难看。） location.href 应该用于url。
第二个论点是 history.pushState() 这是一个标题。环顾网络，大多数地方都说它“未被使用”，这里所有的解决方案都通过了 null 为此。然而，至少在mobile safari中，这会将页面的url放入用户可以访问的历史记录下拉列表中。但是，当它为页面访问添加条目时，通常会添加标题，这是更好的选择。如此短暂 document.title 因为这会导致同样的行为。

<script>
    window.location.hash = "no-back-button";

    // Again because Google Chrome doesn't insert
    // the first hash into the history
    window.location.hash = "Again-No-back-button"; 

    window.onhashchange = function(){
        window.location.hash = "no-back-button";
    }
</script>

要限制浏览器返回事件，请执行以下操作：

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};

此代码将禁用支持html5历史api的现代浏览器的“后退”按钮。在正常情况下，按下后退按钮返回一步，返回上一页。如果使用history.pushstate（），则开始向当前页面添加额外的子步骤。它的工作方式是，如果要使用history.pushstate（）三次，然后开始按后退按钮，前三次它将在这些子步骤中返回，然后第四次它将返回上一页。
如果将此行为与 popstate 事件时，您基本上可以设置子状态的无限循环。因此，您加载页面，按下一个子状态，然后点击后退按钮，弹出一个子状态并按下另一个子状态，因此，如果您再次按下后退按钮，它将永远不会用完要按下的子状态。如果您觉得有必要禁用“后退”按钮，这将使您达到目的。

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});

history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

在chrome 79中，没有一个最受欢迎的答案对我有效。看起来chrome在版本75之后改变了后退按钮的行为。请参见此处：
https://support.google.com/chrome/thread/8721521?hl=en
然而，在谷歌的帖子中，azrulmukmin azmi在最后给出的答案确实有效。这就是他的解决方案。

<script>
    history.pushState(null, document.title, location.href);
    history.back();
    history.forward();
    window.onpopstate = function () {
        history.go(1);
    };
</script>

chrome的问题在于，除非您执行浏览器操作（即调用history.back），否则它不会触发onpopstate事件。这就是为什么我将这些添加到脚本中。
我不完全明白他写了什么，但显然是另一个原因 history.back() / history.forward() 现在需要在chrome 75+中重新阻塞。

这是我完成它的方法。
奇怪的是，在谷歌chrome和safari中，改变window.location的效果并不好。
碰巧location.hash没有在chrome和safari的历史记录中创建条目。因此，您必须使用pushstate。
这在所有浏览器中都适用。

history.pushState({ page: 1 }, "title 1", "#nbb");
window.onhashchange = function (event) {
    window.location.hash = "nbb";
};

<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

此javascript代码不允许任何用户返回（适用于chrome、firefox、internet explorer和edge）。

我觉得jordanhollinger.com上的这篇文章是最好的选择。与razor的答案相似，但更清楚一点。代码如下；乔丹·霍林格的全部学分：
前一页：

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

不返回的javascript页面：

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}

这段代码是用最新的chrome和firefox浏览器测试的。

<script type="text/javascript">
    history.pushState(null, null, location.href);
    history.back();
    history.forward();
    window.onpopstate = function () { history.go(1); };
</script>

React

对于react项目中的模态组件，打开或关闭模态，控制浏览器后退是必要的操作。
这个 stopBrowserBack ：停止浏览器后退按钮功能，同时获取回调函数。此回调函数是您要执行的操作：

const stopBrowserBack = callback => {
  window.history.pushState(null, "", window.location.href);
  window.onpopstate = () => {
    window.history.pushState(null, "", window.location.href);
    callback();
  };
};

这个 startBrowserBack ：恢复浏览器后退按钮功能：

const startBrowserBack = () => {
  window.onpopstate = undefined;
  window.history.back();
};

项目中的用法：

handleOpenModal = () =>
  this.setState(
    { modalOpen: true },
    () => stopBrowserBack(this.handleCloseModal)
  );

handleCloseModal = () =>
  this.setState(
    { modalOpen: false },
    startBrowserBack
  );

轻松尝试：

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});