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

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(tem开发者_如何学Gop, '', 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()

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

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.

I've not found a way to have the browser be responsible for using the cache in the history.

My final solution was using jquery's history plugin, and a javascript hash-array of div objects.

var hash; // populated with the value after #
History[hash] = $('<div>').load(hash);

a quick check if that value is not null - and replacing center of the screen with the div. So far works like a charm, with the exception that the hash value does not change if you click a link that's already loaded, so detecting an intended refresh (by clicking the link of a view that you're already on) is harder.

Good luck!