Injectng a new history entry without changing the url. Like google maps does.

Question

I'm trying to find the best approach not to break the back button in my javascript application.

In my research I'm trying to see what the state of the art is. So I turned to google maps to see how it works.

It does have back/forward functionality, but it doesn't change the url when generating a new history entry. Try to go to http://maps.google.com/, type NY and press enter. Now use the back button. No url change.

How do they do this? I tried to figure it out but I have a hard time wading through outdated documentation about javascript history and IE6 tips.

Answer 1

Create a new history entry:

location.hash = 'new_history_entry';

Creating no history entry:

location.replace('http://no/new/history/entry');

Google maps is using frames. To verify it, run HttpFox. You'll get a HTML page with javascript in it. You can analyse it on your own, or just believe me that it works with frames.

Answer 2

Something like YUI Browser History Manager will do it

Answer 3

Lekensteyn's answer will not add the back/forward buttons in IE6, you need a frame for that. jQuery History uses the onhashchange event if the browser supports it (all modern browsers do) if not it will add the appropriate backwards support needed (ie6 needs iframes, firefox 1, ie7 etc just need interval checks).