重写web浏览器的默认行为通常不是一个好主意。出于安全原因，客户端脚本没有足够的特权来执行此操作。

还有一些类似的问题，

如何防止退格键导航回? 我如何可以防止浏览器的默认历史后退动作退格按钮与JavaScript?

你不能禁用浏览器的后退按钮。然而，你可以使用你的逻辑来阻止用户返回，这将创造一个像它被禁用的印象。这是如何-检查以下片段。

(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，所以它可以在大多数浏览器中工作。它也会禁用退格键，但该键将在输入字段和文本区域内正常工作。

建议设置:

将此片段放在单独的脚本中，并将其包含在需要此行为的页面上。在当前设置中，它将执行DOM的onload事件，这是这段代码的理想入口点。

工作演示!

它在以下浏览器中进行了测试和验证，

铬。 Firefox。 ie浏览器(8-11)和Edge。 Safari。

限制浏览器返回事件:

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

反应

对于React项目中的模态组件，打开或关闭模态，控制浏览器返回是一个必要的动作。

The stopBrowserBack: the stop of the browser back button functionality, also get a callback function. This callback function is what you want to do: const stopBrowserBack = callback => { window.history.pushState(null, "", window.location.href); window.onpopstate = () => { window.history.pushState(null, "", window.location.href); callback(); }; }; The startBrowserBack: the revival of the browser back button functionality: const startBrowserBack = () => { window.onpopstate = undefined; window.history.back(); };

在项目中的使用:

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

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

非常简单和干净的函数打破向后箭头，而不干扰页面之后。

好处:

Loads instantaneously and restores original hash, so the user isn't distracted by URL visibly changing. The user can still exit by pressing back 10 times (that's a good thing), but not accidentally No user interference like other solutions using onbeforeunload It only runs once and doesn't interfere with further hash manipulations in case you use that to track state Restores original hash, so almost invisible. Uses setInterval, so it doesn't break slow browsers and always works. Pure JavaScript, does not require HTML5 history, works everywhere. Unobtrusive, simple, and plays well with other code. Does not use unbeforeunload which interrupts user with modal dialog. It just works without fuss.

注意:其他一些解决方案使用onbeforeunload。请不要为此目的使用onbeforeunload，当用户试图关闭窗口、点击反向箭头等时，onbeforeunload会弹出一个对话框。像onbeforeunload这样的情态动词通常只适用于很少的情况，比如当它们实际上在屏幕上做了更改并且没有保存它们时，不是为了这个目的。

工作原理

在页面加载时执行 保存您的原始散列(如果URL中有一个)。 依次追加#/noop/{1..10}到哈希 恢复原始哈希

就是这样。没有更多的混乱，没有后台事件监控，没有其他。

在一秒钟内使用它

要部署，只需在页面或JavaScript代码中添加这个:

<script>
    /* Break back button */
    window.onload = function(){
      var i = 0;
      var previous_hash = window.location.hash;
      var x = setInterval(function(){
        i++;
        window.location.hash = "/noop/" + i;
        if (i==10){
          clearInterval(x);
          window.location.hash = previous_hash;
        }
      }, 10);
    }
</script>

你可以放一个小脚本，然后检查。它将不允许您访问前一页。

这是用JavaScript完成的。

<script type="text/javascript">
    function preventbackbutton() { window.history.forward(); }
    setTimeout("preventbackbutton()", 0);
    window.onunload = function () { null };
</script>

窗外。Onunload函数当您试图通过浏览器访问返回或上一页时触发。

在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的问题是它不会触发onpopstate事件 除非你做出浏览器动作(即调用history.back)。这就是为什么 我已经将这些添加到脚本中。

我不完全明白他写了什么，但显然现在需要一个额外的history.back() / history.forward()来阻止Chrome 75+中的返回。