Dynamically generating iframes – Preventing refresh when using innerHTML+=

I am a big fan of iframes for some things. I know – as many others do – that you can sometimes effectively and efficiently achieve with iframes, what you can with AJAX.  In many cases, it is way less of a headache, particularly when you mention the fact that AJAX is not cross browser friendly : ( and you are left jumping through the usual hoops for the likes of the”all mighty” Microsoft and their “all friendly” Internet Explorer – just to mention ONE nauseating reason. In my opinion – when you are left the choice “to dance or not dance” for Bill Gates – I will chose to take a seat when I can. As we all know we have been providing plenty of entertainment for Bill over the last decade or so – with our slick dance moves.

Setting up an iframe as a catch all reciprocal transmitter/receiver for form data – has proven very successful for me. I had a usage for dynamically generated iframes to process multiple corresponding check type values. One waiting for values from the other before proceeding.

In this case – I am posting form values to multiple dynamically generated iframes, and want the content of each iframe to remain, as I post to another dynamically generated iframe.

As you can see by my example below – even just dynamically creating and adding a new iframe via” innerHTML +=”, causes the previously generated iframes to refresh inside the container that is being updated with innerHTML+=.

The unwanted refresh does not happen when I do not use javascript to create the iframes – if I just write the html ahead of time and post to the already existing iframes, there is not any refresh problem. The previously posted iframes will remain with the posted content.

I do not know how many iframes I will need – so that is why I am using javascript to dynamically generate the iframes.

I am aware that I could use AJAX for this same purpose, but I am not using AJAX for this.



In my example – the iframes are refreshing, regardless of there content, when I am dynamically adding another iframe to a DIV "iFrame_Container" via javascript and innerHTML.

Is there a way to achieve this without the iframes refreshing?

With my example – I am only showing that the iframes are refreshing. I am not posting to them. But the problem shows up the same.

Click the “Add Iframe” button, up to 3 times. note the previous iframe(s) refreshing as the new one is added.


var Content_For_Iframe_Array = new Array("http://www.bing.com", "http://www.wordpress.com/", "http://www.webcrawler.com");

var Inc_iFrame_Num = 0;
function add_iframe_with_content(){
if(Inc_iFrame_Num < 3){

var iFrame_String ="<iframe frameborder='5' src='"+Content_For_Iframe_Array[Inc_iFrame_Num]+"' scrolling ='yes' id='iFrame_"+Inc_iFrame_Num+"' style='height:300px; width:800px; margin:5px; padding:0px;'></iframe>";
        document.getElementById('iFrame_Container').innerHTML += iFrame_String;

<div style="cursor:pointer; background-color:#CCC; border:thin #7777 solid; width:85px; margin-top:40px; margin-bottom:14px;" onclick="add_iframe_with_content();">Add Iframe</div>
<div id="iFrame_Container" style="height:300px; width:800px; border:#CCC thin solid;">Div to hold Iframes</div>



Why is the innerHTML method refreshing the other iframes?

Because innerHTML will redraw all of the content in the inner location you are trying to add to. In other words: If you had a DIV containing “1 2 3” and you used innerHTML += “4” javascript would first clear the inner html of the object you are trying to add to – and then fill it with “1 2 3 4” thereby refreshing its content – this is why the iframes are refreshing their content.


The proper method is to use createElement() and appendChild(). (See code below)

Here is the correct usage for my example:



PROPER METHOD to place the new iframe in the container DIV "iFrame_Container" :



var iframe = document.createElement('iframe');
iframe.frameBorder = 5;
iframe.scrolling ='yes';
iframe.height = "300px";
iframe.width = "800px";
iframe.name = "iFrame_"+Inc_iFrame_Num;



One Reply to “Dynamically generating iframes – Preventing refresh when using innerHTML+=”

  1. Yeah… the more I use “innerHTML” the more I regret it – I’m going to try to stick to “appendChild()” as often as I can.

    It seems that the refreshing of the container that you want to add to, can cause problems more often than you would like.

Leave a Reply