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 を「リロード」します。ログの最初の 2 行では、要素は同じように見えますが、実際には 2 つの異なるノードです。これは、行 3 が false を返し、それらが異なることを示し、行 4 がbutton親ノードを持たないことを示しているという事実によって証明されます。参照があるため、メモリに座っているだけです。

あなたが発見したように、要素の子を変更する非破壊的な方法は、DOM メソッドを使用することです。appendChild最後に要素を追加したりinsertBefore、別の位置に子を挿入したりするために使用できます。新しいブラウザは、最初に計画していたことを実行するというメソッドをサポートinsertAdjacentHTMLし、文字列から HTML を作成し、非破壊的にノードの最後に挿入します。ただし、まだサポートが完全に整っているとは思いません。他の DOM メソッドは、はるかによく理解されています。

于 2012-07-05T17:59:41.303 に答える
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);
//
于 2012-07-05T17:48:03.787 に答える