问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我写了两个 HTML 文件：

  1. <a href = "Home.html">Next Page</a>
  2. 主页.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 命令，然后我单击后退按钮，它会保留在同一页面上（有效正如预期的那样）。为什么这样？

原文由 Saksham Chaudhary 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtml5-history
阅读 461
2 个回答
得票最新
社区维基
1
✓ 已被采纳

FOA，谢谢大家的回答。

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

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

原文由 Saksham Chaudhary 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

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

})(window);

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

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

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

原文由 rajat.gite 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题