[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
Continue reading “Dynamically generating iframes – Preventing refresh when using innerHTML+=”