Going back in history of iframe but changing address of main window

Question

I've found solutions for manipulating everything except what I need. Here's the scenario

Just like in GMail - main content is presented in an iframe. Clicking links on the main page targets the iframe. This works well, and seamless. At this point if I click "Back" on the browser -- the iframe will go back. This is good because cache is involved and the page doesn't re-download.

Adding a common logic of modifying the hash breaks everything. Now when you hit back the browser changes the has, but does NOT change the iframe history. I've tried accessing the history of that particular iframe frames['myiframe'].history.back() but that still changes the hash without changing the iframe source.

I've found a sneaky history.replaceState(temp, '', iframelocation) and this works seamless when clicking links, but going backwards it actually tries to load the iframe location in the main window.

I'm at a loss. I know GMail does not request all information every time you hit back or forward. So how does it do it? Does it use multiple iframes, and change which one is visible?

Thanks!

P.S. Tested a simple situation: create an iframe, and change a link via some <a href="child" target="iframe">a Now change the hash via location.href = 'something' So far so good. Now if you specifically tell the iframe to go back in history - it will not frames['iframe'].contentWindow.history.back()

Answer 1

Gmail uses AJAX requests to populate Div Layers i believe. You should look into using JQuery to dynamically load data. There is also a jquery history plugin which works to allow you to move and forth seamlessly. http://github.com/tkyk/jquery-history-plugin

Answer 2

This is not a direct answer but it might be useful if you glance at the source code of jQuery BBQ @ http://github.com/cowboy/jquery-bbq/raw/master/jquery.ba-bbq.js

It overrides the back/forward buttons and keeps an in-browser history, if that's any use.