JavaScriptを動的にDivにロードする

Question

URLからdivにJavaScriptコード（これ以上は制御できません）をロードする必要があります。 JavaScriptコードは、document.write（）ステートメントの束です。 document.write（）文の実行が終了したら、jQueryまたはJavaScriptを使用してdivから結果のテキストを抽出し、そのテキストを別のものに使用する必要があります。現在、私はdiv要素の中にはJavaScriptをロードするために次のことをやっている：

$('body').append('<div id="mydiv" style="display: none"></div>'); 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = url; 
    $('#mydiv').append(script); 

にはどうすればいいのdocument.write文が実行を終了していると私はsafetly div要素のうち、テキストを抽出し、それを使用することができたときに知っているだろうか？または、これを行うためのより良い方法がありますか？あなたは何ができるか

Answer 1

document.write()がドキュメントをクリアして新しいドキュメントを開始します。そのdivに含まれているインラインのjavascriptで、ドキュメントの読み込み/レンダリングとして読み込まれていない限り、既に存在するdivにはdocument.write()はありません。

1）あなたは、空のiframeを作成し、そのIFRAMEにJSをロードし、それはそれはiframeにレンダリングさせることができます：

だから、それはあなたに2つのオプションが残ります。 JSからの協力がなければ、レンダリングがいつ行われるかを見るためにポーリングする必要があります。 iframeを適切に作成すると、iframeがロードされたことを確認するためのモニタを設定できる場合があります。

2）あなたのdivにインラインでJSを含めることができ、ページがロードされるとdivにレンダリングされます。これは、このような独自のページのHTMLにdiv要素やスクリプトファイルを焼く必要になります。

<div id="renderTarget"> 
<script src="xxx.js"></script> 
</div> 

あなたはこのようにそれをしなかった場合は、あなたがあなた自身の文書の読み込みが行われたとき、それがレンダリング行われたことを知っているであろう。

Answer 2

は

1）は、最初は何かのデフォルト（ゼロまたはNULL）

2）へのdivボックスを設定するタイマーを設定し、500/1000 MSのために、テキストかどうかを確認::あります最後の時間以来変更されています。テキストはデフォルトがまだある場合

3）、後藤2

4）テキストが変更され、タイムアウトした場合に、リモートJSがどうなることを考慮して、最終的な値として、他のgoto 2.

を取りますすべての書き込みは一度に、つまり、その間に大きなギャップはありません。document.writes

Answer 3

jQuery.getScript()の機能があります。 document.write文の実行が完了していると私は安全にdiv要素のうち、テキストを抽出し、それを使用することができるとき

$.getScript('ajax/test.js', function(data, textStatus){ 
    console.log(data); //data returned 
    console.log(textStatus); //success 
    console.log('Load was performed.'); 
}); 

Answer 4

$.getScript('foo.js', function() { 
alert('foo.js was loaded, do something cool now'); 
}); 

Answer 5

は、どのように私は知っているだろう。ここでは

は、docの例からです？

あなたのアプローチはまったく機能しません。

DOMが読み込みを完了した場合（プログラマチック操作を開始した場合）、閉じた状態になるので、document.writeを呼び出すと、最初にdocument.openが呼び出され、ドキュメント全体が消去されます。

（DOMの読み込みが終了していない場合は、コンテンツがドキュメントの最後に書き込まれ、スクリプトが挿入された場所に書き込まれません）。

Answer 6

あなたはできるセットアップちょうどこの（この例では、それがtest2.htmlと呼ばれています）はhtmlページ：

<script type="application/javascript" src="<url of JavaScript>.js"></script> 

あなたはその後、iframe内にDOMに、このページをロードし、取得loadイベントハンドラをアタッチすることができますがロードが完了した後のページの内容この例では、その後もDOMからを削除します。ここでは

$(function() { 

    //append the iframe onto the body, then select it and attach an event handler for the `load` event 
    $('body').append('<iframe id="myiframe" style="display: none"></iframe>').children('iframe').on('load', function() { 

       //set the html of the `mydiv` element to the body of the loaded page (test2.html) 
     $('#mydiv').html($(this).contents().children().children('body').html()); 

       //remove the iframe from the DOM 
     $(this).remove(); 

     //set the source of the iframe after the `load` event handler is setup to make sure it fires properly 
    }).attr('src', 'test2.html'); 
}); 

はデモです：http://apexeleven.com/stackoverflow/document.write/test.html

注.on()はjQueryの1で新しく追加されていること。この場合、図7に示されており、.bind()と同じです。文書がロードされた後に