Iframes had became very important part of web development. I bet there aren’t many serious sites without any iframe inserted: analytics, some widget, ads or anything else.. I use them often, too, and I’ve encountered an annoying problem: ‘back’ browser button won’t trigger iframe refresh.
Actually, it is the same with the parent page, but there we always may catch this and do something. Iframe cannot handle this event. We also don’t want to refresh our iframe explicitly each time it is loaded.
The solution is what you might think it is, but it took me some time to figure it out. Actually, I received a great help, so I own no credit here. However, as I couldn’t find any mention of this issue on the web, I’m posting it here for the future reference.
We’d like to create our iframe on each window.load event, as this one is fired also when user hits ‘back’ button. We’ll create it dynamically, using two tricks:
1. set iframe.src to about:blank before the append, and after the append change it to actual data
2. add some random value among the iframe.src parameters
Like this:
window.onload = function(){
var ifr = document.createElement("iframe");
ifr.width = '100%';
ifr.height = '500px';
ifr.frameBorder = '0';
ifr.marginHeight = '0';
ifr.marginWidth = '0';
ifr.scrolling = 'no';
ifr.id = 'myIframe';
ifr.src = 'about:blank';
var elt = document.getElementById('eltToAppend');
elt.appendChild(ifr);
ifr.src = ['http://example.com','&r=',Math.random()].join('');
}