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

Question

我写了两个 HTML 文件：

Login.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 命令，然后单击后退按钮，然后它保留在同一页面上（按预期工作）。为什么会这样？

Answer 1

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

Answer 2

HTML5 历史 API 使开发人员能够修改网站的 URL 而无需刷新整个页面。这对于加载带有 JavaScript 的页面部分特别有用，这样内容就会明显不同，并且需要一个新的 URL.

你可以查看这个link它可能会有帮助

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

Answer 3

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

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

如何防止退格键返回？

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

})(window);

这是纯粹的 JavaScript，因此它适用于大多数浏览器。它还会禁用退格键，但该键将在输入字段和文本区域内正常工作。

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

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

Answer 4

FOA，谢谢大家的回答。

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

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

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

Trying to disable the browser's back button

javascript

html5-history