Databases
StackOverflow2013
Postsdbo
PODynamically generating iframes causing previously generated iframes to refresh unwontedly - when using innerHTML
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamically generating iframes causing previously generated iframes to refresh unwontedly - when using innerHTML
    text
    copied!<p>Thanks in advance for any help.</p> <p>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.</p> <p>As you can see by my example - even just dynamically creating and adding a new iframe via innerHTML +=, causes the previously generated iframes to refresh.</p> <p>This is not the case if 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.</p> <p>I do not know how many iframes I will need - so that is why I am using javascript to dynamically generate the iframes.</p> <p>I am aware that I could use AJAX for this same purpose, but I am not using AJAX for this.</p> <p>I just need to know why the iframes are refreshing, regardless of there content, when I am dynamically adding another iframe via Javascript and <strong>innerHTML</strong>?</p> <p>Is there a way to achieve this without the iframes refreshing?</p> <p>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.</p> <p>Click the "Add Iframe" button, up to 3 times. note the previous iframe(s) refreshing as the new one is added.</p> <p>Here is my example code of this problem. </p> <p>Thanks again.</p> <hr> <pre><code>&lt;script type="text/javascript"&gt; 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 &lt; 3){ var iFrame_String ="&lt;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;'&gt;&lt;/iframe&gt;"; document.getElementById('iFrame_Container').innerHTML += iFrame_String; Inc_iFrame_Num++; } } &lt;/script&gt; &lt;div style="cursor:pointer; background-color:#CCC; border:thin #7777 solid; width:85px; margin-top:40px; margin-bottom:14px;" onclick="add_iframe_with_content();"&gt;Add Iframe&lt;/div&gt; &lt;div id="iFrame_Container" style="height:300px; width:800px; border:#CCC thin solid;"&gt;Div to hold Iframes&lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload