div-pageに外部HTMLを読み込んで空白にする

Question

これは愚かなことになると確信していますが、ここではJavaScriptのnoobです。

<div id="topdiv"> 
</div><script> 
     $('#topdiv').load("/widgets/2-0.html"); 
</script>` 

そして、ここでは、次のとおりです。私は私のindex.htmlの中で、私はこれは私がHTMLのロード先となるDIV持っているので、私のインデックスページに外部HTMLの内容をロードしようとしている

それは、ブラウザ自体にロードし、私がロードしようとしている2-0.htmlの内容は、私がこのコントロール（公式Twitterウィジェット）の3を持っている：

<div style="float:right; margin:5px;"> 
    <script src="http://widgets.twimg.com/j/2/widget.js"></script> 
    <script> 
     new TWTR.Widget({ version: 2, type: 'search', search: '#abbaseya', interval: 15000, subject: 'widget', width: 300, height: 360, 
     theme: { shell: {  background: '#8ec1da',  color: '#ffffff' }, 
     tweets: {  background: '#ffffff',  color: '#444444',  links: '#1985b5' } }, 
     features: { scrollbar: true, loop: true, live: true, behavior: 'default' } 
     }).render().start(); 
    </script> 
</div> 

しかし、私は得ることができませんそれはindex.htmlページのdivにロードされます。誰も助けることができますか？

EDIT1：div要素が

<div id="topdiv" style="height:500px;width:100%;"> 


     </div> 
     <script>$('#topdiv').load("/widgets/2-0.html");</script> 

をロードして、私は同じフォルダの下に2つのファイルを入れてきた後、私はdiv要素を変更し、スクリプトを入れてみました、私は、ページが読み込まれる、ある起こる今何数秒間それを見ることができる、そしてすべてが空白になり、空の白い画面が表示されます。私はページソースを表示しようとしましたが、div要素を見ることができ、それらは空であり、その他のものはすべて正確な方法です。

EDIT2：私は.load関数を$（document）.ready関数に入れましたページが読み込まれると、外部HTMLは完全にindex.htmlを置き換えます。

Answer 1

#topdivが存在する前にスクリプトが実行されています。あなたは<div>またはちょうどハンドラを使用した後にそれを置く必要があり、次のいずれか

$(document).ready(function() { 
    $('#topdiv').load("/widgets/2-0.html"); 
}); 

Answer 2

私はウィジェットが（のdocument.writeを使用しています信じている）、それはページをレンダリングしている間に呼び出される必要があることを意味する自分自身をレンダリングするために、それはそれでありますページが読み込まれる前に呼び出される必要があります。

ページが読み込まれた後にdocument.write（）を呼び出すと、ページ全体が書き換えられます。

ウィジェット自体のJavaScriptをdocument.write（）を使用しないように書き直す可能性がありますが、それは多少の労力を要します。

JavaScriptを使用して外部ファイルを読み込もうとするのではなく、サーバーサイドインクルードを使用できます。