试图禁用浏览器的后退按钮答案

【问题标题】：Trying to disable the browser's back button试图禁用浏览器的后退按钮
【发布时间】：2020-05-15 22:06:46
【问题描述】：

我写了两个 HTML 文件：

登录.html <a href = "Home.html">Next Page</a>
Home.html`

<html>
   <body>
      <a href = >Login.html>>Prev Page</a>
   </body>
<script type = "text/javascript" >

	history.pushState("anything", "", "#1");
    	window.onhashchange = function (event) {
       		window.location.hash = "a";
    	};
</script>
</html>

` 我正在尝试禁用浏览器的后退按钮。如果我在 chrome 上执行此代码，它不会禁用后退按钮，但如果我在 Home.html 页面的控制台中运行history.state 命令，然后我单击后退按钮，那么它会保留在同一页面上（按预期工作）。为什么会这样？

【问题讨论】：

见how to stop browser back button using javascript和How to disable back button in browser using javascript。

标签： javascript html5-history

【解决方案1】：

FOA，谢谢大家的回答。

最后下面的代码给了我解决方案：

history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () => history.forward();

【讨论】：

有人能解释一下为什么前两行是必需的吗？只需添加 window.onpopstate = () => history.forward(); 对我来说效果很好

【解决方案2】：

您不能禁用浏览器的后退按钮。如果可以，那将是一个安全隐患，浏览器供应商很可能会寻求修复它。

【讨论】：

根据接受的答案，这已被弃用，对吧？
没有。第一个答案是操纵历史记录，而不是禁用后退按钮

【解决方案3】：

覆盖网络浏览器的默认行为通常是个坏主意。出于安全原因，客户端脚本没有足够的权限来执行此操作。

也很少有人问过类似的问题，

如何防止退格键向后导航？

如何使用 JavaScript 防止浏览器对退格按钮的默认历史返回操作？

您实际上不能禁用浏览器后退按钮。但是，您可以使用您的逻辑来做魔术，以防止用户向后导航，这将产生一种好像它被禁用的印象。方法如下，看看下面的sn-p。

(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 event bubbling up the DOM tree..
            e.stopPropagation();
        };          
    }

})(window);

这是在纯 JavaScript 中，所以它可以在大多数浏览器中工作。它还会禁用退格键，但键将在输入字段和文本区域内正常工作。

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

Working Demo link->  http://output.jsbin.com/yaqaho

【讨论】：

【解决方案4】：

HTML5 History API 使开发人员能够在不刷新整个页面的情况下修改网站的 URL。这对于使用 JavaScript 加载页面的某些部分特别有用，因为内容明显不同并需要新的 URL。

您可以查看此链接，它可能会有所帮助

https://css-tricks.com/using-the-html5-history-api/

【讨论】：