Trying to disable the browser's back button
Question
I've written two HTML files:
- 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>
` 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). Why so?
4 answers
solution1
4 ACCPTED 2020-03-28 08:50:20
FOA, Thanks everyone for your answers.
Finally below code gave me the solution:
history.pushState(null, null, window.location.href); history.back(); window.onpopstate = () => history.forward();
solution2
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.
solution3
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?
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. 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.
Working Demo link-> http://output.jsbin.com/yaqaho
solution4
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. This is particularly useful for loading portions of a page with JavaScript, such that the content is significantly different and warrants a new URL.
You can check this link it may helpful
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.