Dynamically generating iframes – Preventing refresh when using innerHTML+=

 
[SHORTCODE_Insert_Google_Adsence_Here]
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.

——-

THE PROBLEM

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.

——-

[code]
<script>
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;
        Inc_iFrame_Num++;
    }
}
</script>

<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>
[/code]

——-

THE ANSWER

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" :

 

[code]

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

</script>

[/code]
[SHORTCODE_Insert_Google_Adsence_Here]

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