Browser Back Button Detection
Ever since the web moved into the 2.0 generation, websites are increasingly using ajax to build up content, and navigate around without reloading the entire page. There is one major problem with this, and that is the browser. Until now, browsers to not trigger events for when the user is flipping between pages using the navigation buttons. This has been a problem with flash sites for a much longer period of time, with the user clicking back in the browser expecting to see the previous page shown in flash, but instead, they are taken to the last site they were on.
When improving the functionality of our Automated Chat Software, Intellichat, we had many requests from customers asking for the chat window to not launch when the user clicked back in their browser. After a lot of research into the problem, and how to detect it, I found the solution to be based around iFrames (as much as I hate them). When the user clicks back on their browser, they will initially navigate back through the iframes on the page before main page can go back.
This solution works great in Firefox and IE, however Safari needs an alternative solution. This is based around location hash tags (I find this solution quite messy, and easy to spot from the users point of view). When the page first loads, you can set the window.location.hash to anything you want, and then simply check the window.location.hash variable every few milliseconds to see if it has changed. Once it changes back to an empty value, you can see the user clicked back.
The Solution
I have made a very reusable javascript class, that can be simply dropped into your web page, and when the user clicks back, it will call a function. The default function on this call is a javascript alert “Back Button Clicked”.
To replace this functionality, you simply need to override the OnBack function. This can be done by using the code below.
<script type="text/javascript">
bajb_backdetect.OnBack = function()
{
alert('You clicked it!');
}
</script>
This will now replace the “Back Button Clicked” alert with a “You clicked it!’” alert.
You can see the code in action at http://www.brookebryan.com/code/backbutton/
or you can download the source from: http://www.brookebryan.com/code/backbutton/BackDetect.zip
Excellent work, this is just what I was looking for. I noticed the code has the whitespace removed, do you have another copy available so I can read it easier? I wanted to make sure you didn’t implement the polling for safari, though after reading your post again it doesn’t sound like you did. Safari will not be used In the application I will apply this to.
The un-minified code can be found by removing the .min from the JS location when viewing the demo: http://www.brookebryan.com/code/backbutton/backfix.js
It ’s awesome.
But I used it to detect back button acion and at that moment I wanna submit a form and redirect the new page spesified by server response.The server get the request,but the browser always go back the old page in the history and ignore the server response.
So ,it can detect back button acion but can not stop the go back action,doesn’t?
The script will not force the browser to go back to the page in history unless you specify
bajb_backdetect.OnBack = function()
{
history.back();
}
Hope that helps.
It looks like this is the best script available, but it does not work in Firefox 3.6.8 for me.
The function to fire the alert is never fired.
What can it be?
Thanks in advance!
Have you tested this on the demo? http://www.brookebryan.com/code/backbutton/
I am using Firefox 3.6.8 and am not having any issues.
Alternatively, pop over to http://www.supportbuddi.com and mail me your Support Code.
Wonderful! We needed a way to make the back button work because of a major page transition with jquery effects causing them to think it was a new page they went to and so if they wanted to go back to the original screen with the back button, they couldn’t. We are sending an email with a link to the page, so no history will be in place when they go to the page. Your implementation worked like a charm. THANK YOU!