试图禁用浏览器的后退按钮
[英]Trying to disable the browser's back button
问题描述
I've written two HTML files:
我写了两个 HTML 文件：
- Login.html
<a href = "Home.html">Next Page</a>Login.html <a href = "Home.html">Next Page</a> - Home.html`主页.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>
` I'm trying to disable browser's back button. ` 我正在尝试禁用浏览器的后退按钮。 If i execute this code on chrome it doesn't disable the back button but if i run history.state command in console of Home.html page and then i click the back button, then it remains on same page(works as expected).如果我在 chrome 上执行此代码，它不会禁用后退按钮，但如果我在 Home.html 页面的控制台中运行history.state命令，然后单击后退按钮，则它会保留在同一页面上（按预期工作）。 Why so?为什么这样？
4 个解决方案
解决方案1
4 已采纳 2020-03-28 08:50:20
FOA, Thanks everyone for your answers. FOA，感谢大家的回答。
Finally below code gave me the solution:最后下面的代码给了我解决方案：
history.pushState(null, null, window.location.href); history.back(); window.onpopstate = () => history.forward();
解决方案2
1 2020-01-30 10:12:49
You can't disable the browser's back button.您无法禁用浏览器的后退按钮。 If you could, that would be a security hazard and the browser vendors would most likely seek to fix it.如果可以，那将是一个安全隐患，浏览器供应商很可能会寻求修复它。
解决方案3
1 2020-01-30 10:21:04
It is generally a bad idea overriding the default behavior of web browser.覆盖网络浏览器的默认行为通常是一个坏主意。 Client side script does not have the sufficient privilege to do this for security reason.出于安全原因，客户端脚本没有足够的权限来执行此操作。
There are few similar questions asked as well,也很少有人问类似的问题，
How can I prevent the backspace key from navigating back?如何防止退格键返回？
How to prevent browser's default history back action for backspace button with JavaScript?如何使用 JavaScript 阻止浏览器对退格按钮的默认历史后退动作？
You can-not actually disable browser back button.您实际上无法禁用浏览器后退按钮。 However you can do magic using your logic to prevent user from navigating back which will create an impression like it is disabled.但是，您可以使用您的逻辑来实现魔术，以防止用户导航回来，这会产生一种像被禁用的印象。 Here is how, check out the following snippet.这是方法，请查看以下代码段。
(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);
This is in pure JavaScript so it would work in most of the browsers.这是纯 JavaScript 编写的，因此可以在大多数浏览器中使用。 It would also disable backspace key but key will work normally inside input fields and textarea.它也会禁用退格键，但键将在输入字段和文本区域内正常工作。
Recommended Setup: Place this snippet in a separate script and include it on a page where you want this behavior.推荐设置：将此代码段放在单独的脚本中，并将其包含在您希望此行为的页面上。 In current setup it will execute onload event of DOM which is the ideal entry point for this code.在当前设置中，它将执行 DOM 的 onload 事件，这是此代码的理想入口点。
Working Demo link-> http://output.jsbin.com/yaqaho
解决方案4
0 2020-01-30 10:13:43
The HTML5 History API gives developers the ability to modify a website's URL without a full page refresh. HTML5 History API 使开发人员能够在不刷新整个页面的情况下修改网站的 URL。 This is particularly useful for loading portions of a page with JavaScript, such that the content is significantly different and warrants a new URL.这对于用 JavaScript 加载页面的某些部分特别有用，这样内容就明显不同并且需要一个新的 URL。
You can check this link it may helpful您可以查看此链接它可能会有所帮助
https://css-tricks.com/using-the-html5-history-api/ https://css-tricks.com/using-the-html5-history-api/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.