Thursday, November 16th, 2006

Back Button Support: Safari and Speed

Category: Ajax, JavaScript, Library

Daniel Kantor has implemented a Back button solution in Streampad and has shared it with us.

One of the main gripes against AJAX webapps is how they break the back button in a typical browser. There have been a few solutions (notably Brad Neuberg’s Really Simple History) but none have got it working in Safari. GMail still does not have a working back button in Safari.

They say the third time is the charm and I have tried to get a Back button thing in Streampad twice before. I do not want to use someone else’s library as they are usually more complex than I need and I did not want to put something in place until I had Safari working. I tried a few different techniques, but when I got it working in Safari, it would break in Firefox or IE.

I finally figured out a way to get this working in Firefox, IE and Safari.

While Daniel struggled with this, he found that the back button support caused a slow down in the entire app performance. He came up with a new solution that didn’t suffer from the performance issues:

The general concept is this: You load a page into an iframe that calls parent.goBack() and then changes its own location to a new page (a blank page will do). Because the page jumps to a new location, it now has a history. If you click the back button, it will load the page again (calling parent.goBack()) and then spring forward to the dummy blank page.

javascript

  1. var historyArray = Array(); // create an empty array to hold the history
  2. var historyCounter = -1; // initialize the array pointer to -1
  3.  
  4. function historyAdd(f){
  5.   if (historyCounter == -1){  // the first time this is called it will change the iframe location
  6.   document.getElementById(’hFrame’).src = “/historySpring.php”;
  7. }
  8.  
  9. var o = historyArray[historyCounter];
  10. if (f != o){ // don’t put in consecutive duplicates
  11.   historyCounter++
  12.   historyArray[historyCounter] = f; // add function to history
  13. }
  14.  
  15. function goBack() {
  16.   if (historyCounter > 0){ // don’t want to call it if there is nothing in history array
  17.     historyCounter– // set the pointer back one
  18.     var f = historyArray[historyCounter]; // get the function from the history array
  19.     f = f+”()”;
  20.     eval(f); // call the function
  21.   }
  22. }

Posted by Dion Almaer at 8:11 am
13 Comments

+++--
3.8 rating from 59 votes

13 Comments »

Comments feed TrackBack URI

Sadly the faster version doesn’t work in safari!

Comment by Sebastian Munz — November 16, 2006

This from someone (Munz) who locks users out of his site based on browser hahaha . I think i will test this one for myself.

Comment by Mario — November 16, 2006

Actually, I’ve recently published a Safari-compatible back button fix as well. Check out the xa StateManager and let me know what you think.

Comment by matthew — November 16, 2006

How to make the back button work in Ajax in any browser

Ajaxian tells us that Daniel Kantor has figured out cross-browser back button support and written up how he did it. AJAX broke the back-button on most browsers because the designers did not foresee Ajax. It’s a good thing that developers…

Trackback by Hasan Diwan on the Web! — November 16, 2006

Poor JavaScripting practices are demonstrated in the code. You could’ve use [] instead of Array(), and using eval() is a bad hack.

Comment by kourge — November 17, 2006

[…] Anything better than a brand new Firebug 1.0? Err, what about a new back button technique for Ajax app? Well, actually I don’t much about Ajax’s back button techniques but I’ve an idea in mind to use iframe to actually build the history. But it’s only my suppose-to-be-wild idea which has never receive enough love for me (aka not yet implemented, or still being figured out :p). This time on Ajaxian, there an article that share about a back button technique. Seem to be quite simple, and it was already tested on IE, Safari and Firefox. This could be my next project after I deal with NuSOAP’s document/literal binding for our office-brew PHP framework. Popularity: 1% […]

Pingback by Lust::Geek Building The Bridge Part 2 » Ajaxian’s wrap of the day — November 17, 2006

@Mario: ? You mean the “waiting for…”-secreen? Wrong conculusion, my dear: the site locks out every visitor at the moment… whatever browser he is using.

My point is that the post title doesn’t make sense to me. It should be “Back Button Support: Safari OR Speed”. I am searching a practical solution that works for Safari for a while now…

Comment by Sebastian Munz — November 17, 2006

There’s a couple of methods that work in safari these days..

first there’s HistoryKeeper:
http://www.unfocus.com/Projects/HistoryKeeper/
which suffers from a bug where if you leave the original page and then come back safari forgets the history – not a terrible thing, but annoying…

and then recently a thing called StateManager was released:
http://exanimo.com/as2/StateManager

Which was originally created to work with Flash, but the author modified it to work with AJAX apps as well… very cool and it has 100% safari support.. (not sure about the speed, but it would be interesting to compare it to the ‘slow’ one mentioned in the post)

Comment by Geoff — November 17, 2006

Whoop, one more:

forgot about SWFAddress: http://www.asual.com/swfaddress/

which also works in safari, but uses the same technique as HistoryKeeper (linked above) so it has one little bug in Safari.

Comment by Geoff — November 17, 2006

thanks Goeff! the StateManager looks very promising. I’ll give it a try.

Comment by Sebastian Munz — November 18, 2006

And there’s also a jQuery plugin, that has working history in Safari:
jQuery history/remote.

Comment by Klaus Hartl — November 20, 2006

You’ve got mis-matched brackets there. And iframes don’t work properly in Safari. This would not work at all.

Comment by Peter of the Norse — December 10, 2006

There is a zedwood.com article that discusses how to implement ajax with a back button history ajax with a back button history.

What do you think?

Comment by blacklight — November 6, 2008

Leave a comment

You must be logged in to post a comment.