There is an annoying bug in Firefox where navigation in a dynamically created iframe, which is then removed via Javascript, results in the inability to go back using the Firefox back button (you have to use the drop down and navigate back a further couple of pages).
I am using a form in an iframe which validates and submits data. On form submit/data validation the page in the iframe gets refreshed. This breaks the Firefox back button as above.
I need a solution to try and solve this issue and I've currently tried a few different things without much success:
- Storing each iframe page refresh in a session variable (PHP) and then using
history.go(-{session var})in my jQuery code to navigate back. However this only seems to work when navigating back to the page BEFORE the iframe loaded, not the page where the iframe is loaded (in the later, it still breaks the back button) - Hiding the iframe rather than removing it - semi-works but requires multiple back button clicks and brings up the 'do you want to resubmit this data?' message
- Reloading the iframe when the user has closed it. No advantage doing this as if you go back you have to still go through all the previous iframe gubbins.
Any suggestions appreciated - but please note: I want to use an iframe, do not really want to use ajax and would love a solution that is cross-browser compatible (ha!).
If you're interested, steps to reproduce this problem:
- In Firefox try the iframe example which loads Google on the fancybox homepage: http://fancybox.net/home
- Search for something, i.e. load a new page in the iframe
- Close fancybox frame
- Try and go back without resorting to the back dropdown list
Incidentally, IE handles this scenario more gracefully than either Chrome or Firefox!