- ベストアンサー
外部JavaScriptの動的な読み込み方法は？
- 外部JavaScriptファイルをイベントで動的に読み込む方法について知りたいです。
- 特定のボタンクリックなどのイベントで外部JavaScriptファイルを読み込む方法を教えてください。
- Firefoxでthickboxが正常に動作しない場合、外部JavaScriptの読み込み方法を見直す必要があります。
- whosfoo
- お礼率77% (21/27)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
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" & を & または & にエスケープしなければ HTML 構文違反です。HTML5 ならば許容されますが、文書型が HTML 4.01 なので一応指摘しておきます。FC2 の広告スクリプトも同様。
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
一応補足。 「thickboxの読み込みタイミングはwindow.onloadより前でなければならない」 という制限がある場合は、AjaxやJSONPでthickboxを実行することは出来ません。 ボタンを押したら・・・ではなく、ページ読み込みの最初からthickboxを使える状態にしておかなければならないと思います。 もしくは、動的読み込みページでも利用できるライブラリを使用して下さい。
お礼
補足ありがとうございます。 ライブラリも探してみたいと思います。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
そういう場合は、JSONPがいいと思います。 スクリプト読み込み前は「クリックしてみてください！」をクリックできないようにしておき（onclickハンドラをセットしない） callback関数（下記のサンプルはcallback関数の作成を省略していますが）で、 onclickハンドラをセットすれば、意図した動作になると思います。 <input type="button" value="クリック"> クリックボタンからonclickを消し、 追加されるスクリプトファイルの最後に $('input:first').click(alertTEST); を追記してみて下さい。
お礼
ご回答ありがとうございます。 JSONPの件、参考にさせて頂きます。
お礼
ご回答ありがとございます。 教えて頂いた方法で動作は確認できました。 私もjsなどは最初に読み込む方がいいと思います。 今回は技術的にはできることを見せなければいけない事情がありまして このような方法を取りました。 おっしゃるようにできるだけjsファイルはまとめておきたいと思います。 脱線事項のご指摘もありがとうございます。 参考にさせていただきます。