How to disable back button navigation on certain pages

Answer 1

You cannot disable the back button on a user's browser. It's a fundamental feature of browsers which can't be overridden.

You can make it so that your application breaks (displays an error message, requiring the user to start over) if the user goes back. It's a bad idea to do this, because it is really an admission that you didn't take the back button into account when you designed the application. Every application, even order forms, shopping carts etc, if designed correctly should be able to use the back button.

One approach I have seen for breaking on back button use is to pass a token on every URL within the application, and within every form. The token is regenerated on every page, and once the user loads a new page any tokens from previous pages are invalidated.

When the user loads a page, the page will only show if the correct token (which was given to all links/forms on the previous page) was passed to it.

The online banking application my bank provides is like this. If you use the back button at all, no more links will work and no more page reloads can be made - instead you see a notice telling you that you cannot go back, and you have to start over.

Answer 2

You are not allowed to modify the window.history entrys. If you try to set window.history.length most browsers will throw an exception.

But you can do a more smooth thing with onbeforeunload like

window.onbeforeunload = function(){
    return "are you sure?";
};

that will fire a confirmation box when the user trys to leave the current page (including, history back/forward).