Question

提前感谢您的帮助。

我将表单值发布到多个动态生成的iframe，并希望保留每个iframe的内容，因为我发布到另一个动态生成的iframe。

正如您在我的示例中看到的那样 - 即使只是通过innerHTML + =动态创建和添加新的iframe，也会导致之前生成的iframe刷新。

如果我不使用javascript创建iframe，情况并非如此 - 如果我提前编写html并发布到现有的iframe，则没有任何刷新问题。之前发布的iframe将保留在发布的内容中。

我不知道我需要多少iframe - 所以这就是我使用javascript动态生成iframe的原因。

我知道我可以将AJAX用于同样的目的，但我没有使用AJAX。

当我通过Javascript和 innerHTML 动态添加另一个iframe时，我只需要知道为什么iframe会刷新，无论内容是什么？

有没有办法在没有iframe刷新的情况下实现这个目标？

以我的例子 - 我只是显示iframe令人耳目一新。我不是发帖给他们的。但问题出现了同样的问题。

点击“添加iframe”按钮，最多3次。请注意添加新内容时刷新的上一个iframe。

以下是此问题的示例代码。

再次感谢。

<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代码段生成新节点。尝试以下实验。

<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);
//

动态生成iframe，导致以前生成的iframe不经意地刷新 - 使用innerHTML时

2 个答案: