Make the Browser Back button work for the main page when using iframes

We have a problem with IE. On a web page with a form, multiple frames are created via javascript. This is due to some crappy WYSIWYG. The problem is that when the user clicks on the browser "back" button, you'd expect the entire page to go back. This is what happens in FF, Chrome, Opera, Safari, etc. But for IE, you have to click the back button for each frame on the page, even if you don't do anything else but load the page.

Knowing that sometimes +20 frames can be on the same page (many t开发者_如何学Cextfields), this is a real pain for users.

The question: how do you make the browser back button work for the main page, regardless of the amount of frames you have on the page ?

Thanks so much !

One way of doing it is to implement clientside routing using hash bang urls.

Every time a page is changed on an iframe the hash part of the parent url is changed to reflect it.

You then have some js that listens for these changes and does what is needed to updated the full page state across frames.

Now when the user pushes the back button, the parents url changes to the hash it was before the last change in the child iframe, and everything is updated accordingly.

Be aware: that this is a non-trivial thing to implement if you have many iframes, and i can't give you a working script that will fix your problem. This is meant for inspiration only.

(following Martin Jespersen response)

Yes, I also thinks that it is only solution. And it is hard to implement, but there is a lot of good libraries to handle # changes.

The lightweight jQuery solution: http://tkyk.github.com/jquery-history-plugin/.

Very complex solution with ExtJS: http://dev.sencha.com/deploy/dev/examples/history/history.html#tab1:subtab1.

And I think, that is not possible to do it realibly cross-browser without javascript.