Trying To Disable The Browser's Back Button

I've written two HTML files: Login.html Next Page Home.html` ` I'm trying to disable browser's back button. If i execute this code on chrom

Solution 1:

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();

Solution 2:

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.

Solution 3:

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") {
        thrownewError("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

Solution 4:

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

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