clicking 'back' from an iframe changes parent window

Question

I have a script that writes an iFrame which loads a page. I created a JSFiddle to make things clear:

link JSFiddle loading CNN in a frame

This loads CNN in a frame. If you scroll down in the frame to the news and click on the new articles and then 'back' there is some strange behavior in both Safari and Google Chrome: clicking 'back' doesn't take the iframe 'back', it takes the entire parent frame 'back'. How can I prevent this from happening?

Also strange is that fact that this doesn't always happen. Try it out for yourself, click at least 5-10 links and you'll see that the fiddle will reset itself every now and then. And that shouldn't happen...

This is behavior that only seems to happen in Safari en Chrome, Opera and IE don't seem to have this problem...

Answer 1

Browser registers history events when you click different URLS, since iframe is part of the page u are on it will register the click inside the iframe as a history event of the parent page. Different browsers may have slightly diferent behavior - I expect FF and Chrome be one way and IE behave slightly different. However testing your example both Chrome and IE worked exactly the same and pretty much as expected.

So to clarify: Loading JSFiddle is a historical event as far as browser is concerned. Clicking the button to create and load an Iframe is NOT a historical event. Clicking a URL link within the Iframe window is a historical event.

At this point u have 2 states that the browser remembers and you can go back and forth in history between them.