block "back" button

@ppysznikJun 05.2005

Hi,

I’m quiet sure, but I’ve decided to ask:

Is there a posibility to block (disable) “back” (prev page) action/button in browser?

best regards

to post a comment

JavaScript

12 Comments(s) _↴

@VladdyJun 05.2005 — #No, design your site so that it does not have to circumvent to default user interface.

@felgallJun 05.2005 — #Fortunately NO.

@darkpowrjdJun 06.2005 — #Why would you [B]want[/B] to in the first place? That would just turn people off from your site. I know I would hate having to open up a brand new window and going through an entire process JUST to get to what page I was once at before I clicked on a link to your page. It causes unnecessary headaches that no one should or will want to put up with.

@fredmvJun 06.2005 — #No, design your site so that it does not have to circumvent to default user interface.[/QUOTE]This is very true. And even if you were able to (thankfully, you can't), it wouldn't work for users without JavaScript.

@albertseseFeb 21.2007 — #hi. i was wondering the same thing. we are developing a web application that has (naturally) a login. here's the scenario: i login, redirected to the menu page, then logout, and when i press the back button, i want to be redirected to the login page (since i'm not logged in anymore). what happens is, i'm redirected to the page i was previously in before pressing the back button (menu page).

i checked other sites like my yahoo! and they were able to "catch" the back button and redirected me to the login page after i pressed the back button, and not on my yahoo! page

my yahoo! login -> my page -> back button -> login page

and not

my yahoo! login -> my page -> back button -> my page

how were they able to do this? i hope you have some ideas.. we are using java, struts 2 and ibatis..

@pcx99Feb 21.2007 — #You can't block the back button, however you can give the user a chance to think about it.

You do this with the

window.onbeforeunload event. This will automatically throw a dialog box that says:

<i>
 </i>"Are you sure you want to navigate away from this page?"
 
 "press ok to coninue, or Cancel to stay on the current page"

You can insert your own message BETWEEN these two lines by passing a string in the return statement.

<i>
 </i>window.onbeforeunload = function(e) {
 return "You have unsaved changes to  that will be *lost*.  The world will end.  Don't do it.  Please!";
 }

If you return anything you will get the confirmation box. If you return nothing at all (and by that I mean don't have a return statement at all) then no dialog will appear and the back button will function normally (this lets you handle a few shutdown tasks quietly such as an ajax request telling the server you're disconnecting -- make it a sync request though.) etc.

For those asking how secure services manage to detect when you've logged out and redirect you if you try to access a "logged-in" page with the back button after the user has logged out... This is done with server-side headers that disallow page caching. The meta pragma html command can be used as a poor-man's substitute but it's pretty unreliable. However...

<i>
 </i>&lt;?php
 header('Pragma: no-cache');
 header("Cache-Control: no-cache, must-revalidate");
 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
 ?&gt;

On the server side will prevent the page from being cached even in the user's history. This means when the user hits back the page is reloaded, javascript is re-run and it's the javascript being re-run that allows you to check the login-status and do a redirect if the user isn't logged on. additionally your server side scripts can check the cookie state and issue a http redirect which will affect users even without javascript.

@davidonlaptopMar 19.2007 — #pcx99 : I think your code for for blocking the cache does not work in Mozilla Firefox 2.0.

@pcx99Mar 19.2007 — #pcx99 : I think your code for for blocking the cache does not work in Mozilla Firefox 2.0.[/QUOTE]

onbeforeunload works quite nicely in firefox. Yahoo uses it for their pipes service which is how I first stumbled on it. The reply is a bit off however, just setting up an onbeforeunload event prevents page caching (or if not that, forces all scripts to refire always regardless of how the page was entered which means you can check to see if the user is still logged in and if not serve him/her a different page).

It's still good to do cache control headers and meta tags but onbeforeunload seems to be a magical little function that allows for true session management.

As an aside the cache control headers I used in my original post are server-side php code. The browser equivalents are...

<i>
 </i>&lt;META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"&gt;
 &lt;META HTTP-EQUIV="EXPIRES" CONTENT="01 Jan 1970 00:00:00 GMT"&gt;
 &lt;META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"&gt;

You need to put them in a <head> tag [b]below[/b] your body tag or they'll be completely useless in IE ( http://support.microsoft.com/kb/222064 ).

As long as you have an onbeforeunload event set up (it doesn't have to prompt it just has to exist) I'm not terribly sure you need to cache control headers/meta tags but it's a nice security blanket to fall back on.

@mparker1113Sep 25.2007 — #Hi -- I have a solution which seems to do this very thing.

It is pretty simple javascript which I simply dropped onto the page:

// Browser Back Button
  window.history.forward(1);  // this works for IE standalone
 
  window.onbeforeunload = confirmBrowseAway;  //the code from here down
   // was needed to 'trick' firefox 2.x to work too
  function confirmBrowseAway()
  {
   if (!NonExistentVariable) {
   return "";
   }
  }

Best,

Hi,

I'm quiet sure, but I've decided to ask:

Is there a posibility to block (disable) "back" (prev page) action/button in browser?

best regards[/QUOTE]

@felgallSep 25.2007 — #There are all sorts of things you can do using the onbeforeunload event handler to annoy your visitors. Fortunately it is relatively easy to disable that event handler in those browsers that support it.

@mparker1113Sep 26.2007 — #I am not attempting to predict every application's development needs; but wanted to post this code -- to help in case someone has designed an architecture where disabling the browser button is something they consider to be desired.

The thing with the unload event is it seemed to be necessary in order to get firefox to recognize the window.history.forward() assignment. Otherwise, the unload event does absolutely nothing.

@DokSep 26.2007 — #If you are developing an application which runs solely on AJAX it makes perfect sense to disable the back button. Going back would exit/reset your application which would be even more annoying to the user in my opinion.

However I would solve this by opening a new page upon login. This way the new page has no history and thus the user can not go back.

Also in #JavaScript _↴

Default stylesheet on leaving a page How make text clickable but NOT select it?Record Lookup

Success!

Help @ppysznik spread the word by sharing this article on Twitter...

Tweet This

block "back" button

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

block "back" button

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴