外部javascriptを動的に読み込むには

お世話になっております。
何度か質問させていただいているjavascrip初心者です。

外部jsファイルをボタンクリックなど何かのイベントで動的に読み込む方法がないか模索しています。

http://foofoo77.web.fc2.com/thickbox/test_index. …
↑上記ページは「書き換える」ボタンを押すと
javascriptのappendChildで
<div id="target1">書き換え</div>
の中にscriptタグが追加される動きにしています。

書き換え後に「クリックしてみてください！」をクリックすると
thickboxが動作する動きにしたいと思っています。

ieだとうまく挙動するのですが、firefoxだとthickboxは動作してくれません。
どうすればうまく挙動させれることができるこができますでしょうか？

ご教授よろしくお願いいたします。
※今回はthickboxのjs読み込みで試していますが、実際にやりたいことはもっと読み込みが重いjsの動的な読み込みです。

No.1 ベストアンサー 回答者： Chaire 回答日時： 2011/02/13 03:16

jQuery なんぞ使うから……なんてのはともかく、thickbox.js の冒頭にある $(document).ready() の非互換のせいだと思います。

ready() に渡されている無名の関数式を外に出して名前を付け（例えば function hogehoge() {...}）、スクリプト末尾で hogehoge() と明示的に実行して下さい。

---
ただ、ご質問に根本から反対するようで恐縮ですが、

> 外部jsファイルをボタンクリックなど何かのイベントで動的に読み込む

これは避けた方が良いです。ボタンを押してから読み込みが始まるのでは、利用者をかなり待たせてしまいます。ボタンを押したら即座に結果が得られるサクサク感こそが「Ajax」の醍醐味なのであって、そのためには利用者が操作していない待ち時間の間に「非同期」に読み込みを完了しておくことが大事です。利用者の操作のたびに、いちいち読み込み待ちが入るような UI は考え直すべきです。

ですから、この場合は最初に thickbox.js も読み込んでおくのをお勧めします。もちろん、このままでは初期化処理が走ってしまいますから、冒頭に書いたように ready() の中身を hogehoge() 関数として外に出し、クリック時にこの hogehoge() 関数を呼び出して初期化を行えば良いでしょう。

できれば jquery.js と thickbox.js を 1 個のファイルにまとめ、HTTP コネクション数も減らして下さい。

---
脱線ですが、

> font-size:16pt;
ここで pt 単位を使わないで下さい。

> href="text.html?TB_iframe=true&width=800&height=500"
& を &amp; または & にエスケープしなければ HTML 構文違反です。HTML5 ならば許容されますが、文書型が HTML 4.01 なので一応指摘しておきます。FC2 の広告スクリプトも同様。

この回答へのお礼

ご回答ありがとございます。

教えて頂いた方法で動作は確認できました。
私もjsなどは最初に読み込む方がいいと思います。

今回は技術的にはできることを見せなければいけない事情がありまして
このような方法を取りました。

おっしゃるようにできるだけjsファイルはまとめておきたいと思います。

脱線事項のご指摘もありがとうございます。
参考にさせていただきます。

お礼日時：2011/02/20 18:11

No.3 回答者： taloo 回答日時： 2011/02/13 14:50

一応補足。

「thickboxの読み込みタイミングはwindow.onloadより前でなければならない」
という制限がある場合は、AjaxやJSONPでthickboxを実行することは出来ません。
ボタンを押したら・・・ではなく、ページ読み込みの最初からthickboxを使える状態にしておかなければならないと思います。

もしくは、動的読み込みページでも利用できるライブラリを使用して下さい。

この回答へのお礼

補足ありがとうございます。

ライブラリも探してみたいと思います。

お礼日時：2011/02/20 18:21

No.2 回答者： taloo 回答日時： 2011/02/13 14:34

そういう場合は、JSONPがいいと思います。

スクリプト読み込み前は「クリックしてみてください！」をクリックできないようにしておき（onclickハンドラをセットしない）
callback関数（下記のサンプルはcallback関数の作成を省略していますが）で、
onclickハンドラをセットすれば、意図した動作になると思います。


<input type="button" value="クリック">
クリックボタンからonclickを消し、
追加されるスクリプトファイルの最後に

$('input:first').click(alertTEST);

を追記してみて下さい。

この回答へのお礼

ご回答ありがとうございます。

JSONPの件、参考にさせて頂きます。

お礼日時：2011/02/20 18:19