0

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...

patrick
  • 11,519
  • 8
  • 71
  • 80
  • I did some more testing, opened the fiddle in a new window in Chrome, I can't click 'back' from an artice, the fiddle will reset, but when I click items on CNN's navbar I can click 'back' and go to CNN's main page... – patrick Mar 22 '12 at 03:30
  • are you clicking the browsers back button or a "back" link on the cnn site? – jeremysawesome Mar 22 '12 at 03:47
  • I'm clicking the browser's 'back' button – patrick Mar 22 '12 at 07:27
  • Looks like you've got the opposite problem that this question discusses: http://stackoverflow.com/q/2245883/296889. The solution, do exactly what caused this guys problem in the first place :) – jeremysawesome Mar 22 '12 at 14:06
  • I looked in to that, but the problem is not that inserting the iframe itself is the problem. It's when I click something in the iframe and then click 'back' that the parent goes back instead of the iframe. Opera, IE and Firefox don't have this problem - ever - but somehow Chrome and Safari have this, but not always... try it with the JSFiddle... – patrick Mar 23 '12 at 10:36

2 Answers2

0

If you are using React, then MemoryRouter works like a charm - https://reactrouter.com/en/main/router-components/memory-router

Jatin Ranka
  • 35
  • 6
0

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.

dbrin
  • 15,525
  • 4
  • 56
  • 83
  • obviously clicking the button to open the iframe doesn't create an historic event, but how can I click 'back' from any of the articles and up at a resetted JSFiddle (so 'back' going back on the parent window), but when I click a link in their menu-bar and click 'back' I go back to the previous page of the CNN site (like you would expect?). Is this a bug in Chrome? IE doesn't show this same behavior... – patrick Mar 22 '12 at 07:30
  • in my opinion Chrome is doing the right thing here - like i said i tested it in ie8 and it worked the same way. To override it you might be able to listen for the history events on the iframe window see https://github.com/balupton/history.js – dbrin Mar 22 '12 at 17:05
  • So when loading a page in an iframe and clicking a link and then click back SHOULD cause the iframe to go back in one case and then (seemingly random) should 'back' the parent window in other cases? That doesn't make sense to me? – patrick Mar 23 '12 at 10:37
  • I don't think there is any randomness here at all. I think perhaps you have encountered "clicks" that do not add to browser history (like an AJAX request) - and you may have hit one of those. If implemented properly on the page those clicks can also add history events. – dbrin Mar 23 '12 at 18:04
  • have you tried the JSFiddle in Chrome? If I go to cnn.com and do the exact same thing there everything works like it should, but if I check CNN through the iframe I am able to click 'back' from the menu links, but not from the article links... I don't think that's normal behavior, right? – patrick Mar 26 '12 at 13:53