1

提前感谢您的帮助。

我将表单值发布到多个动态生成的 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 时刷新之前的 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>
4

2 回答 2

3

既然你解决了它，这就是它发生的原因。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 方法更容易理解。

于 2012-07-05T17:59:41.303 回答
1

我想我找到了答案。正确的方法是使用createElement()and 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);
//
于 2012-07-05T17:48:03.787 回答