Redirect to another page when back button is pressed in JavaScript

One of the most wanted feature now-a-days is to detect browser back button. Couple of years ago there were lots of script to detect browser’s back button, but browsers are getting smarter day by day, and so are we :)

Sometimes we need to redirect into a different page when user press browser back button. So, we need to detect when the user press back button. Well a developer Brooke Bryan wrote a script for detecting pressing back button. You will found the script here. But it will detect back button and then redirect to old page. I have modified the original code based on his suggestion so that you can set a script to redirect into a different page.

You may also read:  A little trick to store data into mysql database from a large form

You can get modified script here:
* Back Button Detection Object V 1.0.1
* Copyright 2010, Brooke Bryan
* Date: Thu 27 Jan 2011 13:37 GMT

var bajb_backdetect={Version:’1.0.0′,Description:’Back Button Detection’,Browser:{IE:!!(window.attachEvent&&!window.opera),Safari:navigator.userAgent.indexOf(‘Apple’)>-1,Opera:!!window.opera},FrameLoaded:0,FrameTry:0,FrameTimeout:null,OnBack:function(){alert(‘Back Button Clicked’)},BAJBFrame:function(){var BAJBOnBack=document.getElementById(‘BAJBOnBack’);if(bajb_backdetect.FrameLoaded>1){if(bajb_backdetect.FrameLoaded==2){bajb_backdetect.OnBack();}}bajb_backdetect.FrameLoaded++;if(bajb_backdetect.FrameLoaded==1){if(bajb_backdetect.Browser.IE){bajb_backdetect.SetupFrames()}else{bajb_backdetect.FrameTimeout=setTimeout(“bajb_backdetect.SetupFrames();”,700)}}},SetupFrames:function(){clearTimeout(bajb_backdetect.FrameTimeout);var BBiFrame=document.getElementById(‘BAJBOnBack’);var checkVar=BBiFrame.src.substr(-11,11);if(bajb_backdetect.FrameLoaded==1&&checkVar!=”HistoryLoad”){BBiFrame.src=”blank.html?HistoryLoad”}else{if(bajb_backdetect.FrameTry<2&&checkVar!=”HistoryLoad”){bajb_backdetect.FrameTry++;bajb_backdetect.FrameTimeout=setTimeout(“bajb_backdetect.SetupFrames();”,700)}}},SafariHash:’false’,Safari:function(){if(bajb_backdetect.SafariHash==’false’){if(window.location.hash==’#b’){bajb_backdetect.SafariHash=’true’}else{window.location.hash=’#b’}setTimeout(“bajb_backdetect.Safari();”,100)}else if(bajb_backdetect.SafariHash==’true’){if(window.location.hash==”){bajb_backdetect.SafariHash=’back';bajb_backdetect.OnBack();}else{setTimeout(“bajb_backdetect.Safari();”,100)}}},Initialise:function(){if(bajb_backdetect.Browser.Safari){setTimeout(“bajb_backdetect.Safari();”,600)}else{document.write(‘‘)}}};bajb_backdetect.Initialise();

Now we need to use it.

Fortunately, you don’t need a second page to check this script. You will use this script in the page from where you need to redirect into a different page when back button is pressed. Logic is, when the page with the script loaded, a hashtag (#b) is automatically added with the URL. So, you can press the back button for the first page (as I said don’t need a second page to test).

You may also read:  Setup a web server in Linux Ubuntu

I assume you have saved the above script in a file called – backfix.min.js and put it in js folder. So, first include the script into your html head section. And then call the script:



And you’re done. You can do anything you want with script within that function. You also can set a message like “Are you sure want to live this page?” with confirm function.

So, Brooke made our life easy, Good bless him :)

You may also like...

1 Response

  1. Pancho says:

    I have a doubt:

    After click on back button, it goes back to the same URL without the #b,
    and if I click back one more time I can go back to the previous page (where I actually dont want the user to go).
    Is there any way to prevent the user to back (pressing once or several times on the back button)?

Leave a Reply

%d bloggers like this: