I wanted to insert an iframe in a webpage, chosen at random among the files panel_1.html, panel_2.html, panel_3.html.

I first tried to setup the iframe with JavaScript at onload with innerHTML or with document.write in a div container called “content”. An example is shown herafter:

var i = 1 + Math.round(Math.random()*(2));

document.getElementById(‘content’).innerHTML='<iframe src=”panel_’ +i +’.html” width=”100%” height=”100%”></iframe>’;

These solutions worked as expected in the Google Chrome browser, but there were problems either with the Firefox browser or with the IE browser due to caching problems. The iframe was not refreshed despite changing the src data in the iframe tag.

Most proposals found on the web with a Google search did’nt solve the problem on all browsers. By setting the src of the Iframe instead of changing the innerHTML of its container as shown hereafter the iframes are refreshed in the 3 browser’s IE, Firefox and Chrome.

<iframe id=”mypanel” src=”about:blank” width=”100%”
height=”100%” ></iframe>
<script type=”text/javascript”>
var i = 1 + Math.round(Math.random()*(2));
document.getElementById(‘mypanel’).src=’panel_’+i+’.html’
</script>

I would like to add that by using the <object> tag insted of the <iframe> tag, cross-browser problems are even worse.