动态生成 iframe 导致先前生成的 iframe 异常刷新 - 使用 innerHTML 时

Question

提前感谢您的帮助。

我张贴形式值以多个动态生成的内部框架，并希望每个iframe的内容保持，正如我张贴到另一个动态生成的iframe中。 P>

可以通过我的例子见 - 甚至只是动态创建和经由innerHTML的添加新的iframe + =，使先前产生的iframe刷新 P>

这是不是这样的，如果我不使用JavaScript来创建I帧 - 如果我只是写HTML提前时间和岗位已有的内部框架，没有任何刷新问题。先前公布的I帧将保持与所述所张贴的内容。 P>

我不知道有多少I帧我会需要 - 所以这就是为什么我使用JavaScript来动态地生成I帧 P>

我知道我可以使用AJAX为同样的目的，但我不使用AJAX这一点。 P>

我只需要知道为什么iframe会让人耳目一新，无论有内容的，当我动态通过JavaScript增加一个IFRAME和的innerHTML STRONG> P>

有没有办法实现这个没有I帧刷新？ P>

通过我的例子 - 我只是显示出I帧的刷新。我不是张贴到他们。但问题显示了相同的。 P>

点击“添加的iFrame”按钮，最多3次。注意先前的iframe（一个或多个）作为新一个被添加刷新。 P>

下面是此问题的我的示例代码。

再次感谢。

---

<script type="text/javascript">
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>

Answer 1

既然你解决了它，这就是它发生的原因。从技术上讲，iframe 没有刷新，它们被销毁然后重新创建。

当您设置innerHTML 时，您会删除元素内的所有现有节点，然后根据您插入的 HTML sn-p 生成新节点。试试下面的实验。

<div id="el"><button>My Button</button></div>
<script>
    var myElement = document.getElementById('el');
    var button = myElement.firstChild;

    myElement.innerHTML = myElement.innerHTML;

    console.log(button);
    console.log(myElement.firstChild);
    console.log(button == myElement.firstChild);
    console.log(button.parentNode);
</script>

在这里，您看到我们有一个<div> 持有一个<button>。我们将按钮存储为变量，然后“重新加载”内部 HTML。在日志的前两行中，元素看起来相同，但它们实际上是两个不同的节点。第 3 行返回 false 的事实证明了这一点，表明它们是不同的，第 4 行表明button 没有父节点。它只是存在于内存中，因为我们有对它的引用。

正如您所发现的，更改元素子元素的非破坏性方法是使用 DOM 方法。您可以使用appendChild 在末尾添加一个元素，或者使用insertBefore 在不同位置插入一个子元素。较新的浏览器支持一种称为insertAdjacentHTML 的方法，该方法执行您最初的计划，从字符串创建 HTML 并将其非破坏性地插入到节点的末尾。不过，我认为支持还不是很完善，而且其他 DOM 方法更容易理解。

Answer 2

我想我找到了答案。 正确的方法是使用createElement() 和appendChild()。 （见下面的代码）

但我还是很想知道为什么 innerHTML 方法会刷新其他 iframe？

这是我的示例的正确用法：

// PROPER METHOD to place the new iframe
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);
//