Disable Back Button in Browser using JavaScript

By Viral Patel on November 26, 2009

Sometimes we have requirement in developing a website to disable the Back button effect from Browser. This is common in Online Banking Websites and other sites where security is of principal concern. User may hit back and navigate from the page and forget to logout.

Hence sometime it is required that we disable the functionality of Back button. But unfortunately this is not an easy task. There is no direct way of dealing with this problem. We can do few hacks to ensure that user does not get back in the browser.

Following are few tricks that can be used to disable the back button in browser. Please note that we do not literally “disable” the back button, but just nullify its effect is some case and hide it altogether in others.

Open A New Window without Back Button

This one is very crude technique. But in some case it works like charm. All you have to do is to open the webpage in a new window. This window doesn’t have back button at all because we have hide the toolbar.
This technique does work in some case but user has still a workaround to navigate to previous page. Most of the browser have options of Back in context menu. Thus user can still right click on the page and click Back to go to previous page. We will shortly see the workaround for this issue also.

Following is the code to open webpage in a new window have no toolbar (Back/Next buttons).

window.open ("http://viralpatel.net/blogs/",
"mywindow","status=1,toolbar=0");

Also it is possible to disable the right click on any webpage using Javascript. Add following code in the webpage.

 <body oncontextmenu="return false;">

Disable Back functionality using history.forward

This is another technique to disable the back functionality in any webpage. We can disable the back navigation by adding following code in the webpage. Now the catch here is that you have to add this code in all the pages where you want to avoid user to get back from previous page. For example user follows the navigation page1 -> page2. And you want to stop user from page2 to go back to page1. In this case all following code in page1.

<SCRIPT type="text/javascript">
	window.history.forward();
	function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
	onpageshow="if (event.persisted) noBack();" onunload="">

The above code will trigger history.forward event for page1. Thus if user presses Back button on page2, he will be sent to page1. But the history.forward code on page1 pushes the user back to page2. Thus user will not be able to go back from page1.

Check the demo for this example.
ONLINE DEMO

Get our Articles via Email. Enter your email address.

44 Comments

Karthikeyan C wrote on 26 November, 2009, 19:07

This is really cool. I have posted it in DZone. Thanks for your time involved.

Viral Patel wrote on 26 November, 2009, 19:09
Thanks Karthikeyan.

Reply

Harika Rai wrote on 15 December, 2009, 12:16

How to delete cookie history on a sign out and not allowing back functionality by using javascript

Sameer Gawade wrote on 16 November, 2011, 14:51
http://geekswithblogs.net/Frez/articles/back-button-issue-after-logout-in-asp.net.aspx
Please refer above link .
Thanks ,
Sameer

Reply

Nonye Ulasi wrote on 15 January, 2010, 22:08

Hi Viral,
Thanks for the above code however, using the window. history.forward() function to disable the back browser works well on IE and Opear, but not on Safari and google chrome. Do you know why this is, and if so, could you supply some javascript code that will work on all browsers?
Many Thanks
Nonye

sweta wrote on 23 January, 2010, 13:12

really good

Manoj wrote on 24 January, 2010, 19:49

Hi Viral,
Not working for Google chrome. Can you please give javascript code that will work on all browsers?
Many Thanks

Michael Freidgeim wrote on 31 January, 2010, 15:41

see http://www.boutell.com/newfaq/creating/backbutton.html -use setTimeoutto delay call to forward. -should help for other browsers

padma wrote on 1 March, 2010, 14:52

Only IE its working not in all browsers

sathish wrote on 17 March, 2010, 2:11

but it is not working for Google chrome

Mayur wrote on 27 April, 2010, 1:34

Read the below article :
excellent one :
The code works for IE 7, Chrome 4.1, Firefox 3.6.3
http://www.boutell.com/newfaq/creating/backbutton.html

Sedat Kumcu wrote on 20 June, 2010, 17:28

thanks for this useful article. best regards.

jeterboy wrote on 21 September, 2010, 19:50

hey thanks for this.

Shobhraj wrote on 23 October, 2010, 15:39

Thanks….good content…

vikash wrote on 27 October, 2010, 11:20

////Open A New Window without Back Button//

This method is not working in IE-7
plz help me out

amit wrote on 1 December, 2010, 12:32

this is not working

Amit Herlekar wrote on 11 December, 2010, 15:22

Many thanks

vishnu wrote on 16 December, 2010, 18:08

hi,
Thanks….good answer
But using PHP, how to prevent clicking the browser back button for authenticated pages

Pavan wrote on 28 January, 2011, 22:33

Thanks this code works fine that disable to go back the previous page.

Rubesh wrote on 8 February, 2011, 8:19

Not So Effective For me……………………………….!

Azhar wrote on 10 February, 2011, 12:01

Hi..Thank you very much. It has helped me alot:)

KAIALSH wrote on 4 March, 2011, 9:18

Hi Viral Sir i liked ur code of Itext to generate PDF also.This one is also cool!!Thanks a lot!

divya wrote on 5 April, 2011, 15:59

Thanks a ton!!!
Its kindly helpful for me..
I knew “window.history.forward”
but i was not frequent with javaScript so unable to use properly

but ur article really helped me out!!!

I want to ask you one more thing..
if u wil reply then i wil ask something

THANKSSS!!!

aadi wrote on 21 April, 2011, 21:45

Hey ,

Thankz

Its 2 good

Dumindu wrote on 9 May, 2011, 8:27

Thanks

salumiah wrote on 25 June, 2011, 10:53

excellent…
am using this code in webpages…
thankyou

balaji wrote on 28 August, 2011, 23:15

thank you for the code

Shishir wrote on 30 August, 2011, 11:13

Cool….. Thankyou so much…

tito wrote on 20 September, 2011, 10:01

thanks so much

Sachin Kalane wrote on 8 October, 2011, 7:19

This is really works… I got solution…
Thanx Viral for posting this….

DineshKumar wrote on 16 October, 2011, 14:03

Good Work…
Thanks a lot….

jim wrote on 20 October, 2011, 12:54

thanks

ved wrote on 18 November, 2011, 15:30

buddy..i am working on a project and i need to disable the back button,but after my all stuffs i am still unable to do this..i don;t know why it is not working in my running project ,instead it is working in other of my team mate’s project .
could you please tell me ,am i doing some thing wrong? why it is not working.