動態生成內聯框架導致以前生成的內聯框架不經常刷新 - 使用innerHTML時

Question

預先感謝您提供任何幫助。

我將表單值發佈到多個動態生成的iframe，並希望每個iframe的內容保持不變，因爲我發佈到另一個動態生成的iframe。

正如您在我的示例中看到的 - 即使只是通過innerHTML + =動態創建並添加新的iframe，也會導致先前生成的iframe被刷新。

如果我不使用javascript來創建iframe，那麼情況並非如此 - 如果我只是提前寫入html併發布到已存在的iframe，則不會有任何刷新問題。以前發佈的iframe將保留在發佈的內容中。

我不知道我需要多少iframe - 所以這就是爲什麼我使用javascript來動態生成iframe。

我知道我可以使用AJAX來達到同樣的目的，但我沒有爲此使用AJAX。

我只是需要知道爲什麼iframes刷新，無論有什麼內容，當我通過Javascript動態添加另一個iframe和innerHTML？

有沒有一種方法來實現這一點，而沒有iframes刷新？

以我的例子 - 我只顯示iframes刷新。我不張貼給他們。但問題顯示相同。

點擊「添加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> 

Answer 1

我想我找到了答案。 正確的方法是使用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); 
// 

Answer 2

既然你解決它，這是爲什麼它發生了。內聯框架在技術上沒有刷新，它們被銷燬並重新創建。

當您設置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方法則更加了解。