AJAX Back Button Fix


AJAX has become popular because you can execute server side scripts without having to refresh an entire page. By doing partial page refreshes, website performance is usually improved. However we start to run into a problem. If you have an entire website that fetches portions of pages or executes server side scripts using AJAX, clicking the back button will usually take a user off of their entire website, instead of 'back' to the last 'partial page refresh' which they would expect.

Flash developers have had to deal with this issue for a while, so my AJAX back button fix is a variant. Robert Penner's came up with his fix for Flash Back Button problem as it relates to flash.

Here is my solution:

You set your pages up so you have a hidden frame storing the page history for your ajax website so the back button knows where to take you back to.

What happens is this, when they click on a link to execute the ajax function, instead you replace it with a javascript function. This function redirects the hidden frame's page to a new page which corresponds to the ajax function you wish to call. When that page loads it executes the ajax function from the original page, when the ajax call returns you can format and display the results as you would normally.

When you click on another ajax link it does the same thing. When you go to click back... it moves to the previous page in the hidden page's history, which when loaded will execute the ajax function on the original page, returning the page to its previous state, just as you would expect a back button to.

The last thing to remember when you set it all up, is to make it so the initial page that the hidden frame starts on executes an ajax function which corresponds to the initial state of your original page, so when that if they only click on one ajax link, then click back, your page returns to its initial state as expected.

Working Demo
Download .zip
code snippets are licensed under Creative Commons CC-By-SA 3.0 (unless otherwise specified)

jan on 2008-10-24 14:56:43
The only problem I see with your solution is, that you can not bookmark certain sections... so you will always have to start at the default state which greatly reduces the use of an application.

Pax on 2009-02-20 16:55:35
I like it, though in all honesty doesn't it kind of defeat the purpose of implementing AJAX? :P
Also, what do you reckon would be a good way of coping with going back to AJAX calls in the user's history that rely on DIV elements that are no longer around? - I certainly don't have the answer yet.

danny on 2009-09-26 18:03:04
doesnt work on IE6.

Ilan on 2009-10-27 07:54:54
does not work for me on Chrome 3.0.195.27

luke on 2009-11-01 16:13:26
I've been trying to find a simple solution to this for a long time now.

At the moment I'm using an iframe and using setInterval to monitor frames[i].location.

I store previous information in a hidden 'history' div, and compare the frame location with a var that stores the 'current' div's source, and replace 'current' div if a change is detected.

This appears to work nicely on Chrome, Firefox, ie7. Not sure about ie6 (but probably).

However, bookmarking becomes problematic, because you need to change the location.hash in the parent window, however, this upsets the back button functionality of the browser.

Unfortunately I think with the nature of this workaround bookmarking is not possible. If only ie6/7 javascript did not fail to register a change in location.hash, we wouldn't have to come up with alternatives like these.

hasan on 2010-01-11 00:22:26
try this way :
1-

var counter = 0 ;
urlarray = new array(100);


//2- som your js function ....
//3-
function (url)
{
counter = counter +1;
urlarray[counter]=url;
}
4-
function goback()
{
counter = counter -1;
url = urlarray[counter]
//......
/.........

xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}


i hop it usful.
for dimo vist my site
:
simacom.de

sajeepan on 2010-02-20 11:38:10
AJAX Back Button
very usefuy sample
thanks

Maarten on 2010-11-23 15:00:41
Thanks! Works great, using it on my new project. I could be wrong but doesn't GWT use this technique too?

tim on 2011-02-09 04:39:29
how do I call the goback() function in hasan's example? I tried window.onunload. fail.

Andris on 2011-04-01 17:42:36
I used an different way. after every click on link, a new hash is generated. And every second javascript checks if document.location.hash is different than one that tas made by last request. if so, reload page to this new location... living example on latvian site:
http://www.makslai.lv