window.history.back() reloads the page in Internet Explorer when inside of an iframe?

Question

I'm noticing a strange behavior with Internet Explorer when my page is inside of an iframe. It seems that the iframe reloads itself when calling window.history.back(), even though only the hash in the URL should be changing. When the page is not inside of an iframe, it behaves properly and doesn't reload the page. Any idea why this is happening and how to prevent it?

I created a fiddle that will demonstrate this in IE9:

http://jsfiddle.net/peh96/5/

jsfiddle uses an iframe, so the behavior will be the iframe behavior. Clicking '#foo' and '#bar' will change the hash in the URL. Now clicking the 'BACK' link will trigger window.history.back(). Notice that the timestamp changes when you do that, indicating that the page is reloading.

Alternatively, if you load the iframe directly:

http://fiddle.jshell.net/peh96/5/show/

you'll notice that the timestamp doesn't change when click 'BACK'.

This is an IE issue only, as Chrome and Firefox is consistent whether inside of an iframe or not.

Any idea how to prevent this reload?

Answer 1

Well, when I choose Back command from context menu, it does the same. In IE10 you can use HTML5 State Management. I'm afraid in IE9 you must track hash history and than change it like this:

document.getElementById('back').addEventListener('click', function () {
    window.location.hash = 'abc';
}, false);

Edit

And what about this? When you call javascript:window.top.location.hash='bar', you can catch onhashchange event in parent window and then call scrollTo in iframe. But this works only in the same domain.