Disable Back Button in Browser using JavaScript

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.

disable-back-button-browser

Open A New Window without Back Button

browser-back-button-viralpatelThis 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.

   

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.

%MINIFYHTMLa26fec61303dd28eac35521f2f35ff0a10%

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.

Warn User if Back is Pressed

You may want to warn user if Back button is pressed. This works in most of the cases. If you have some unsaved form data, you might want to trigger a warning message to user if Back button is pressed.

Following Javascript snippet will add a warning message in case Back button is pressed:

window.onbeforeunload = function() { return "You work will be lost."; };

Include this in your HTML page to popup a warning message.

Check the demo for this example.
ONLINE DEMO



112 Comments

  • Raja 2 August, 2012, 18:30

    Thanks Dude

  • Hardik Soni 17 August, 2012, 17:06

    Hi
    This script is not working in safari.

    I am checking it on safari 5.1.7.

    Please have a look at it.

    Thanks

  • Prajakta 23 August, 2012, 12:49

    Its not working with function onbeforeunload()
    Is there any way to disable back button?

    • Nils 15 October, 2012, 15:36

      To disable browser’s back button “window.history.forward();” is enough, isn’t it ?
      Why do we need all other code ?
      Plzz reply fast…

      • Nils 15 October, 2012, 15:38

        Oppps! it wasn’t for you but to the post…How did it go there ?

  • yuda 31 August, 2012, 13:05

    thanks for help ^^

  • Matthew Blott 26 September, 2012, 21:10

    Hardik Soni is correct – this doesn’t work in Safari.

    • Aniruddh 6 June, 2014, 12:51

      It does not work in safari browser because safari does not support things like window.history() and window.go() , similerly data-rel attribute is also unreliable. We can use 4mobile.Changepage() call in that case by getting pageId/url of previous page in that case

  • Sashank Raj 11 October, 2012, 0:01

    So, much thank you.

  • Murthy 12 October, 2012, 4:54

    Excellent article. But my problem is how to avoid the back button from the current page. For e.g. after session expires, it will be redirected to “sessionexpiredpage.aspx”. If user is trying to click on back button it should not go back, it should stay in the same page and user will forcefully close the browser. Appreciate if you can provide the code to handle this.

    Thanks a ton.

    • Prabhu 19 October, 2012, 12:53

      Paste that javascript in pages to which you don’t want to come back again no matter what.
      Suppose Page1 is idle and redirected to Expiry Page, paste the code in Page 1 to avoid coming back to Page 1 using browser’s back button

  • mudassir 17 October, 2012, 10:35

    superb

  • Scott Joplin 2 November, 2012, 1:29

    Anyone who disables the back button of a browser is scum. Why would you want to intentionally make the internet harder for people to use? Are you trying to ensure that repeat traffic on your website is zero?

    You’re an idiot if you use this feature. A properly designed website will never, for any reason, need this feature. You’re an amature

    • Brandon 2 November, 2012, 23:30

      Hi Scott,

      Everyone is entitled to their opinion, but this doesn’t only apply to the “Internet”. What if you have a web-based application (internal to your company) running on JVMs? Many web-based applications throw Java exceptions which cannot be handled when the back/refresh buttons are pressed. This action leads to null pointer exceptions in the application log, and rapid generation of many spurious objects within JVM memory, which Garbage Collection then struggles to delete. This in turn can lead to the JVM memory being maxed out, causing major performance issues and/or outages. Sounds to me like you’re the amateur…and that goes for your spelling as well.

      • dragunov 26 December, 2013, 6:57

        Hi Scott,

        And sometimes due to security reason to protect data or system/application flows. Not everything is about traffic :)

    • ravi 13 September, 2014, 0:55

      this is very much useful when dealing with form data where inserted data get lost so in order to prevent this is used.

  • Steve 14 November, 2012, 11:19

    Thank You so so so much dude..im a noob at this stuff and been looking for this lol

  • Mandeep Singh 27 November, 2012, 10:05

    I remember I needed this for a Drupal website I was building a few years ago. Fortunately, we found a Drupal Module to do the trick.

  • Giuseppe 5 December, 2012, 22:03

    Followinganother solution without using window.history:

    <script type="text/javascript">
    	function clickLink() {
    		document.getElementById("link").click();
    	}
    	
    </script>
    
    <body onload="clickLink()">
    		
    <a id="link" href="page2.html" />
    
    </body>
    
    • Afzal 24 May, 2013, 15:16

      Thanks dude…

  • vivek yadav 23 December, 2012, 8:56

    Dude you are great and i truely repect you.

  • Ayush 24 December, 2012, 15:52

    This is working like a charm. Thanks a lot. Now do you know how to disable the forward as well.
    Thanks a billion.

  • kkkkkkkkk 1 January, 2013, 15:21

    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);

  • Thirunavukarasu 25 January, 2013, 12:19

    Thank you so much …. Mr.Viral Patel

  • Arnold 13 February, 2013, 16:08

    Thanks Viral for sharing this. The fact that I have landed here, means I was looking for help. Those of you demeaning these solutions will one day come back to this site. There are so many practical reasons for these requirements.

  • Ashish 14 February, 2013, 13:08

    Thanks … Viral your post saved a lot of time ….

  • Praveen 1 March, 2013, 19:52

    This was of excellent help.
    Thanks for posting it .

  • shoiyab 19 March, 2013, 9:47

    Thanks

  • sam 4 April, 2013, 17:55

    thanks dude …….
    this really wark

  • sam 4 April, 2013, 18:02

    hi
    my query is
    i create a table in mysql5.5 create table data(id int NOT NULL AUTO_INCREMENT ,user varchar(30),pass varchar(20),PRIMARY KEY(id)) ENGINE=MyISAM;
    but id is not auto increment plz resolve this problem …………….

  • pooja 20 April, 2013, 14:14

    thanks …….
    this code really works and my prob. is easily solved by this code.

  • pankaj wanajri 23 April, 2013, 11:38

    Cool tricks ……….it works perfectly for me .
    Thanks buddy .

  • pooja 24 April, 2013, 22:30

    I m using the code given below n this is not working so can anybody tell me what is the problem in this code

    <script type="text/type">
    window.History.forward();
    </script>
    <%response.setHeader("Pragma","no-cache");
    response.setHeader("Cache-control","no-store");
    response.setHeader("Expires","0");
    response.setHeader("Expires","-1");%>

  • Sweety 24 April, 2013, 22:33

    I m using the code given below n this is not working so can anybody tell me what is the problem in this code

    window.History.forward();

  • Vamsi 15 May, 2013, 16:25

    Thank u very much its working…. i solved my problem.

  • Arpit Totla 23 May, 2013, 16:54

    Thank u…great work…

  • pranay godha 31 May, 2013, 20:26

    Thank you. it helped me.

  • Gulshan 16 June, 2013, 13:45

    Thanx…very helpful

  • jiju 4 July, 2013, 16:07

    nice..very helpful

  • ravi 8 July, 2013, 19:13

    Thanks you. Very helpful :)

  • nisha 17 July, 2013, 10:37

    i wanna such code for only single page not for entire pages. this code is working finely in entire pages not in single page. how will i do when i logout the page comletely then i click on back button nothing shoud b happen there. i can’t put these code in entire pages. i wanna such a script which we keep within logout page…….

  • prapoorna 5 August, 2013, 12:45

    Thank you so much.. you helped me a lot, it is working for browser back button and working fine for right click on browser’s back button too.

    • Deeksha 6 August, 2013, 11:24

      Hi prapoorna
      Is your functionality working when you pressed back button twice or more than once?
      If yes can you please provide the solution for this?

  • Deeksha 6 August, 2013, 11:22

    Thanks Viral Your solution is working fine for me.But its working only when i click Back Button first time.When i click it twice then am getting “webpage Expired” .
    Any Solution to this Problem??

  • joker 9 September, 2013, 18:27

    thanks

  • yunus 16 September, 2013, 14:55

    Thanks viralpatel
    It’s really helpful n it works!

  • jay 30 September, 2013, 11:15

    How to disble user in ACL spring security…

  • Aro 1 November, 2013, 16:35

    Thanks dude

    help me alot

  • pallavaraju 4 December, 2013, 16:41

    thanku thanku thanku very much…….. its working dude

  • dario 13 December, 2013, 0:20

    Thanks!

  • bhavana khatri 11 January, 2014, 17:25

    this code is not work for me in my site.

  • bhavana khatri 11 January, 2014, 18:07

    One More Solution on Pageload of Master page

    Response.Cache.SetCacheability(HttpCacheability.NoCache)
    Response.Cache.SetExpires(DateTime.UtcNow.AddHours(-1))
    Response.Cache.SetNoStore()

  • Anshul 23 January, 2014, 20:53

    not working :(

  • Ranjan 4 February, 2014, 16:59

    I am a regular subscriber ….

    disable back button in jsp is not working,..Kindly suggest

  • sam 7 April, 2014, 17:12

    IT WORKS JUST LIKE ‘Viral Patel’ SAY’S.

  • franco 23 April, 2014, 15:41

    how to redirect to a different page if press back botton or refresh a page?

  • bhargav 17 July, 2014, 12:59

    hai i liked it.but i want this to happen only when click on logout button only.
    plz help

  • Lawrence 23 November, 2014, 4:47

    Thanks Boss!!

  • sushma 16 December, 2014, 22:37

    Hi i have a question, I am performing a research were i am required to disable back button. I tried your code and its working fine. but i have a timer in my second page so whenever user clicks back button in page 2 it comes back from page 1 with timer starting again. Do my question is how do i save my current state. Please guide. Appreciate your help

Leave a Reply

Your email address will not be published. Required fields are marked *

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]