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 can get modified script here:
[javascript]
/*!
* Back Button Detection Object V 1.0.1
* www.brookebryan.com/
*
* 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();
[/javascript]

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

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:

[html]

//
[/html]

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