How Gmail makes IE Back work without refresh?

Question

Gmail uses # when you click on a mail to distinguish the page (+ Ajax action). http://mail.google.com/mail/#inbox/1238e709e37a1394

I found: Google using # instead of search? in URL. Why?

In FF or Chrome you can use Forward and Back without refresh between those urls: http://X.com/MyPage.aspx#1 http://X.com/MyPage.aspx#2 http://X.com/MyPage.aspx#3

But on IE the page refresh and it doesn't count the params after # when a back action is made.

How Gmail make the magic happens?

Answer 1

I can give you the answer to this, because I've faced and solved this problem.

There are a few concepts to understand here first:

1. javascript cannot alter the browser history directly.
2. whenever the base URL of an iframe in the page changes, the history gets updated. (but this has some quirks with different browsers).
3. the url has a "hashed" part: eg, in the URL http://mail.google.com/mail#inbox, #inbox is the hashed part. Lets call it the "hash". so http://mail.google.com/mail will be our "base URL".

Tracking history by GMail is mainly done using tricks based on this "hash".

So, a few more concepts:

1. when the URL in the address bar changes, the history gets updated (the previous URL goes into the history)
2. when the base URL gets changed, the page is reloaded.
3. when the hash part of the URL changes without the base URL changing, the page is not reloaded.

So, when you go from http://mail.google.com/mail#inbox to http://mail.google.com/mail#sent, the page does not get refreshed.

Now, if GMail were to get an event notification when the hash changed, then gmail could take actions based on that. Unfortunately, there are no DOM events that can help us capture history actions. So instead (this is the part which shows how I overcame the problem), we run an infinite loop that checks for changes to the hash. If it observes a change, then we detect a click to the "back" or "forward" button of the browser.

In solving this, I made a handy tool: the URL parser. It can parse GET params in the URL, as well as params encoded in the Hash. Give the demo a go!

Cheers!

---

About this problem in IE: I did not realize that this 'hash' based solution does not work on IE (poor old linux developer).

But for IE, you can use a hidden iframe, and use its "url affects history" property to implement history. I know this statement lacks details, but that stems from my own lack of experience with IE.

I will try this solution, and follow up :)

I found a host of links on the internet, that do proper implementations of history using iframes/location hash. I did not have the patience to dig up the differences between iframe interface on various browsers.

I guess I'd prefer the jquery plugin. YUI has a history manager too.

Cheers!