Disable browsers' back button, completely

Question

Need to prevent users going to the previous page, completely.

When I use the following code it works but it's not what I need exactly. When pressing the back button it says "Document Expired":

Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
Response.Cache.SetValidUntilExpires(false);
Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetNoStore();

Another idea - to open a new window without toolbar:

<script>
    function PopupWithoutToolbar(link) {
        var w = window.open(link.href,
            link.target || "_blank",
            'menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=no,dependent,width=800,height=620,left=0,top=0');
        return w ? false : true;
    }
</script>

<a href="http://www.google.com" onclick="return PopupWithoutToolbar(this)">yahoo</a>

But, still... If the user presses the backspace button on a keyboard he can go back. It seems that this approach is only for hiding and not disabling buttons.

Is there any way to simply ignore the back button?

https://stackoverflow.com/questions/12381563/how-to-stop-browser-back-button-using-javascript — amiramw, Jun 14 '17 at 19:24
You might want to reconsider doing this. A back button is one of the most basic and well known functions of a browser (even my grandma knows about it). Disabling it or changing it's function results in a terrible user experience since the user will probably think that their browser crashed or their mouse is busted since something will (not) happens that has always worked. — VDWWD, Jun 14 '17 at 20:28

score 2 · Answer 1 · answered Dec 21 '18 at 23:16

2

I'm using a slightly different solution:

history.pushState(null, null, location.href);
window.onpopstate = function () {
    history.go(1);
}

answered Dec 21 '18 at 23:16

Rob

216
3
9

score 2 · Answer 2 · answered May 31 '19 at 07:12

To disable the back button in the browser you can use use the following code in your JavaScript on the page on which you want to disable the back button.

<script>
history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };
</script>

score 1 · Answer 3 · answered Jun 14 '17 at 19:22

I am not entirely sure if this will work, but you can try handling the event with javascript.

Like if you want to entirely disable the backspace button from allowing users to go back you can do like

$(window).on("keypress", function (e){
    if(e.keycode == "backspace") 
         e.preventDefault();
})

I could figure out the keycode for backspace for you , but that isn't too hard to figure out. Also this uses jquery, but you can use just raw javascript. just wasn't sure what it would be offhand.

score 1 · Answer 4 · answered Jun 14 '17 at 19:23

Simplest thing ever:

window.onhashchange = function (event) {
 //blah blah blah
 event.preventDefault();
 return false;
}

You can handle the location domain etc from that (window.location) then cancel the event if you want in this case.

How to Detect Browser Back Button event - Cross Browser

score 1 · Accepted Answer · answered Jun 14 '17 at 20:03

Based on your post it sounds like your only issue is disabling the backspace button from allowing the user to go back.

Here's what I do for that using jquery. Still allows backspace to work inside enabled text editing inputs, where it should.

    // Prevent the backspace key from navigating back.
    $(document).unbind('keydown').bind('keydown', function (event) {
        var doPrevent = false;
        if (event.keyCode === 8) {
            var d = event.srcElement || event.target;
            if ((d.tagName.toUpperCase() === 'INPUT' && (d.type.toUpperCase() === 'TEXT' ||
                                                         d.type.toUpperCase() === 'PASSWORD' ||
                                                         d.type.toUpperCase() === 'FILE')) ||
                                                         d.tagName.toUpperCase() === 'TEXTAREA') {
                doPrevent = d.readOnly || d.disabled;
            }
            else {
                doPrevent = true;
            }
        }

        if (doPrevent) {
            event.preventDefault();
        }
    });

Disable browsers' back button, completely

5 Answers5

Linked