Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disabling Back button on the browser [closed]

I am writing an application that if the user hits back, it may resend the same information and mess up the flow and integrity of data. How do I disable it for users who are with and without javascript on?

like image 925
Haoest Avatar asked Sep 17 '08 20:09

Haoest


People also ask

Is it possible to disable browser back button?

You can-not actually disable the browser back button. However, you can do magic using your logic to prevent the user from navigating back which will create an impression like it is disabled.

How do I hide the back button in Chrome?

Select Settings from the list. Scroll down to the Privacy and Security section, and select the Site settings from the menu. Choose the Pop-ups and redirects option within Site settings. Toggle the button to turn OFF and block the pop-ups and redirection.

How do I prevent someone from going back to previous page?

Master, I have used the code that to prevent the user from going back to previous pages after logout. function preventBack() { window. history. forward(); } setTimeout("preventBack()", 0); window.


9 Answers

It's not possible, sadly. However, consider your applications navigation model. Are you using Post/Redirect/Get PRG Model? http://en.wikipedia.org/wiki/Post/Redirect/Get?

This model is more back button friendly than the Postback model.

like image 62
Scott Hanselman Avatar answered Oct 25 '22 07:10

Scott Hanselman


You shouldn't.

You could attach some script to the onbeforeunload event of a page and confirm with the user that's what they want to do; and you can go a bit further and try to disable it but of course that will only work for users who have javascript turned on. Instead look at rewriting the app so you don't commit transactions on each page submit, but only at the end of the process.

like image 35
blowdart Avatar answered Oct 25 '22 09:10

blowdart


I strongly urge you to go to heroic lengths to prevent breaking the back button, it is a sure fire way to alienate your users and even made it to No.1 on Jacob Neilsen's Top 10 Web Design Mistakes in 1999.

Perhaps you could consider rather asking the question: "How to avoid breaking the back button for <insert your scenario here>?"

If Scott's answer hits close to the mark, consider changing your flow to the PRG model. If it's something else, then give a bit more detail and see how we can help.

like image 35
Mike Tunnicliffe Avatar answered Oct 25 '22 07:10

Mike Tunnicliffe


I came up with a little hack that disables the back button using JavaScript. I checked it on chrome 10, firefox 3.6 and IE9:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
     window.location.href += "#";
     setTimeout("changeHashAgain()", "50"); 
}

function changeHashAgain() {
  window.location.href += "1";
}

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
         window.location.hash = storedHash;
    }
}, 50);


</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit back!
</body>
</html>
like image 40
Yossi Shasho Avatar answered Oct 25 '22 07:10

Yossi Shasho


Best option is not to depend on postbacks to control flow, however if you are stuck with it (for now)

you may use something like this:

  Response.Cache.SetCacheability(HttpCacheability.NoCache);
  Response.Cache.SetExpires(Now.AddSeconds(-1));
  Response.Cache.SetNoStore();
  Response.AppendHeader("Pragma", "no-cache");

Soon you will find that it will not work on all browsers, but then you may introduce a check in your code like:

 if (Page.IsPostBack)
 {
        if (pageIsExpired()){
           Response.Redirect("/Some_error_page.htm");
        }
        else {
           var now = Now;
           Session("TimeStamp") = now.ToString();
           ViewState("TimeStamp") = now.ToString();
        }

  private boolean pageIsExpired()
  {
     if (Session("TimeStamp") == null || ViewState("TimeStamp") == null)
        return false;

     if (Session("TimeStamp") == ViewState("TimeStamp"))
        return true;

        return false;
  }

That will solve problem to some extend, Code not checked -- only for examples purposes..

like image 22
Claus Thomsen Avatar answered Oct 25 '22 09:10

Claus Thomsen


It is possible to disable back button in all major browser. It just uses hash values to disable the back button completely. Just put these 5 lines of code in your page

 <script>
window.location.hash="no-back-button";
window.location.hash="Again-no-back-button";//for google chrome
window.onhashchange=function(){window.location.hash="no-back-button";}
</script> 

Detailed description

like image 39
bugwheels94 Avatar answered Oct 25 '22 07:10

bugwheels94


Here's a previous post on it: Prevent Use of the Back Button (in IE)

like image 35
kemiller2002 Avatar answered Oct 25 '22 08:10

kemiller2002


Whatever you come up with to disable the back button might not stop the back button in future browsers.

If its late in the development cycle I suggest you try some suggestions above but when you get time you should structure your flow so that the back button does not interfere with the logic of your site, it simply takes the user back to the previous page like they expect it to do.

like image 25
Keith Avatar answered Oct 25 '22 08:10

Keith


It is true, proper validation should be added to make sure duplicate data doesn't mess things up. However, as in my case, I don't full control of the data since I'm using some third party API after my form. So I used this

history.go(+1);

This will send user forward to the "receipt" which is supposed to come after "payment" page if they try to go back to "payment" page (just giving a payment for example). Use sparingly, though

like image 34
katzmopolitan Avatar answered Oct 25 '22 07:10

katzmopolitan