外部JavaScriptの動的な読み込み方法は？
- 外部JavaScriptファイルをイベントで動的に読み込む方法について知りたいです。
- 特定のボタンクリックなどのイベントで外部JavaScriptファイルを読み込む方法を教えてください。
- Firefoxでthickboxが正常に動作しない場合、外部JavaScriptの読み込み方法を見直す必要があります。
- ベストアンサー
外部javascriptを動的に読み込むには
お世話になっております。 何度か質問させていただいているjavascrip初心者です。 外部jsファイルをボタンクリックなど何かのイベントで動的に読み込む方法がないか模索しています。 http://foofoo77.web.fc2.com/thickbox/test_index.html ↑上記ページは「書き換える」ボタンを押すと javascriptのappendChildで <div id="target1">書き換え</div> の中にscriptタグが追加される動きにしています。 書き換え後に「クリックしてみてください！」をクリックすると thickboxが動作する動きにしたいと思っています。 ieだとうまく挙動するのですが、firefoxだとthickboxは動作してくれません。 どうすればうまく挙動させれることができるこができますでしょうか？ ご教授よろしくお願いいたします。 ※今回はthickboxのjs読み込みで試していますが、実際にやりたいことはもっと読み込みが重いjsの動的な読み込みです。
- 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/2281)
一応補足。 「thickboxの読み込みタイミングはwindow.onloadより前でなければならない」 という制限がある場合は、AjaxやJSONPでthickboxを実行することは出来ません。 ボタンを押したら・・・ではなく、ページ読み込みの最初からthickboxを使える状態にしておかなければならないと思います。 もしくは、動的読み込みページでも利用できるライブラリを使用して下さい。
お礼
補足ありがとうございます。 ライブラリも探してみたいと思います。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
そういう場合は、JSONPがいいと思います。 スクリプト読み込み前は「クリックしてみてください！」をクリックできないようにしておき（onclickハンドラをセットしない） callback関数（下記のサンプルはcallback関数の作成を省略していますが）で、 onclickハンドラをセットすれば、意図した動作になると思います。 <input type="button" value="クリック"> クリックボタンからonclickを消し、 追加されるスクリプトファイルの最後に $('input:first').click(alertTEST); を追記してみて下さい。
お礼
ご回答ありがとうございます。 JSONPの件、参考にさせて頂きます。
関連するQ&A
- 外部javascriptの重複を防ぐには
簡単なタグを貼り付けるだけで使えるブログパーツを、javascriptで作ろうとしています。 ＜■コード(1)＞ <script type="text/javascript" src="http://ex.com/js/test.js"></script> <div> <img class="imgobj" src="http://ex.com/dm.gif" width=1 height=1/> </div> 上記のように外部JSを読み、そのJSの中でimgタグのonloadイベントを記述し、そのイベントの処理でimgタグの直前にテキストを書き出すようにしています。これはidなどを意識しなくてもタグを貼りつけた場所に出力されるようにするための措置です。 上記は単独で貼り付ける場合はうまくいったのですが、同じコードを複數貼り付けると外部JSの衝突でエラーになります。よって外部JSの読み込みを動的にしてみました。 ＜■コード(2)＞ <script type="text/javascript"> var obj=""; obj = document.getElementById("example_tag"); if( !obj ){ var ele = document.createElement("script"); ele.id = "amacusplus_scriptfile"; ele.type = "text/javascript"; ele.src = "http://ex.com/test.js"; document.body.appendChild(ele); } </script> <div> <img class="imgobj" src="http://ex.com/dm.gif" width=1 height=1/> </div> このソースを同じページ内で二箇所貼り付けると、 今度は動的な外部JSの読み込みとimgタグのonload処理の発生タイミングが微妙なため挙動不審になってしまいました。成功したり失敗したり・・・。 とこのような状況で煮詰まっています。 質問は （1）外部JSの動的な読み込みの後に、明示的にimgのonloadイベントを起こすことはできないか？ がメインですが、他のアプローチで解決できればそれでもいいので （2）<script>～</script>内に書いたjavascript内で、現在位置を知る方法（scriptエレメントを知る方法） （3）複数回読まれても重複を起こさない外部JSやその読み込み方法の書き方 などなにかヒントになるようなことを教えて頂きたいのです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- hide()；について
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> jQuery(function($){ $('#target01').hide(); $('button','#id01').click(function(){ $('#target01').toggle('slow'); }); }); </script> <div id="id01"> <button>押してくれ</button> <div id="target01">文章</div> </div> 読み込みが完了するまで「文章」が表示されます。 読み込み時も非表示したいのですが可能でしょか？？ 宜しく御願いします。
- 締切済み
- JavaScript
- 【javascript 文法】値渡し？参照渡し？
以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <script type="text/javascript"><!-- var gDown= false; var div = document.createElement('div'); div.id = 'AAA'; div.innerHTML = 'AAA'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); var div = document.createElement('div'); div.id = 'BBB'; div.innerHTML = 'BBB'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); Event.observe(document, 'mouseup',function(){ alert(gDown.id); gDown=false; }); //--></script> </body> </html> javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって 参照渡し？それとも値渡し？ と混乱しています。 この辺のところを、教えてください。お願いいたします。
- ベストアンサー
- JavaScript
- jqueryのloadで読み込んだページ内でthickboxで画像を表示する方法
画像表示処理方法で教えて頂ければと思います。 テスト用に２つのファイル(index.html, test.html)を用意しました。 index.htmlで thickboxを使用して画像をクリックすると希望通り （画像がアップ表示）の動作をします。 しかしindex.htmlのloadで test.html読み込んだ時の画像部分が、 target="_self"で押したときの動作になってしまいます。 解決方法、よろしくお願いします。 -----index.html----- <html> <head> <link href="thickbox.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <script type="text/javascript"> <!-- function init(){ $("#Test").load("test.html"); } // --> </script> </head> <body onload="init()"> <div id="Test"></div> <hr> (2)<a href="test.gif" title="" class="thickbox"><img alt="" src="test.gif" /></a> </body> </html> -----test.html----- (1)<a href="test.gif" title="" class="thickbox"><img alt="" src="test.gif" /></a>
- ベストアンサー
- JavaScript
- 外部htmlを読み込み→書き換え→上書き保存したい
java scriptで、外部htmlを読み込んで、書き換えて、上書き保存したいのですが 可能でしょうか？ それともPHPですべきでしょうか？ PHPが全く分からないので、できればjsでできたら嬉しいと思い 調べたのですがなかなか見つからず相談させていただきました。 ディレクトリ構造は index.html →jsが記述されたhtml target.html →書き換えたいhtml です。 index.html内で、ボタンをクリックすると target.htmlが読み込まれ、内容を書き換え、上書き保存するという 処理を行いたいです。 どんな内容に書き換えるとかは全て index.html内のjsに記述したいです。 こんなイメージなのですが、可能でしょうか？ 全く見当外れでしょうか。。？ ご存知の方いらっしゃいましたら 何卒ご教授のほど、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- オートページングだとライトボックスが開かない
大量の写真を表示するために、jquery.masonry + infinitescroll を使用しています。 http://masonry.desandro.com/demos/infinite-scroll.html 写真をクリックしたときにライトボックス風にページを表示できるよう↓このようにthickbox.jsを入れているのですが、 <a href="foophp?fileName=filename.png&keepThis=true&TB_iframe=true&height=500" title="" class="thickbox"><img src="filepath/filename.png" width="210" border="0" /></a> オートページングで読み込んできた部分は、写真をクリックしてもthickboxが開かずにそのまま画面が遷移してしまいます。 ■現在の状況 ・masonryで写真を敷き詰めるのはできています ・infinitescrollで、スクロールダウンしていくと自動的に次の写真を読み込んで敷き詰めます。これもできています。 ・最初に表示されるページ（オートページングではないページ）では、写真をクリックすればthickboxが開きます。 ・最初に表示されるページをスクロールダウンして自動的に読み込まれた写真達は、クリックするとthickboxではなく画面遷移します（ブラウザのアドレス欄がその画像のパスになってしまう） ■やってみたこと ・infinitescroll で <div id="container">～</div>を読み込むように指定しているので、２ページ目以降のファイルで、#container の中でthickbox.js, thickbox.cssを宣言してみました。 <div id="container"> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="all" /> <script type="text/javascript" src="js/thickbox.js"></script> <a href="foophp?fileName=filename.png&keepThis=true&TB_iframe=true&height=500" title="" class="thickbox"><img src="filepath/filename.png" width="210" border="0" /></a> </div> のようにcontainer内に表示してみましたが状況は変わらず、オートページングで読んだページでは写真をクリックしても画面遷移してしまいました。 ■解決したいこと オートページングで読み込まれた写真をクリックしても、画面遷移せずにthickboxを開きたい。 何卒ご教示の程、お願い申し上げます。
- ベストアンサー
- JavaScript
- javascriptについて教えてください。
divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id; alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptの動的読み込みについて教えてください
javascriptの動的読み込みについて教えてください いつもお世話になります。 jqueryを勉強中のものです。 少しややこしいのですが、 以下のmenu.htmlとmain.htmlを持ったframe.htmlで、メニューの試験ボタンを押してmain.htmlの<div id="target_id">にload.htmlを動的に読み込んだ時、loadされたhelloボタンが作動しません。 menu.htmlのtest()中のalert(data);でload.htmlの<script>が読み込まれていることは確認できるのですが・・何が原因でどこが悪いのでしょうか？ よろしくご指導お願いします。 frame.html ----------------------------------------------------------- <html> <head> <title>Dynamic Load Test</title> </head> <frameset name="frame" cols="180,*"> <frame name="menu" src="menu.html"> <frame name="MainPanel" src="main.html"> </frameset> </html> ----------------------------------------------------------- menu.html ----------------------------------------------------------- <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"><!-- function test(){ jQuery.get("./load.html",function(data){ alert(data); $("#target_id",window.parent.MainPanel.document).html(data); }); } // --></script> </head> <body> <button onClick="test();">試験</button> </body> </html> ----------------------------------------------------------- main.html ----------------------------------------------------------- <html> <head> </head> <body> <h1>main.html</h1> </body> <div id="target_id"></div> </html> ----------------------------------------------------------- load.html ----------------------------------------------------------- <h1>load.html</h1> <script type="text/javascript"><!-- function hello(){ alert("こんにちわ"); } // --></script> <button onClick="hello();">hello</button> -----------------------------------------------------------
- ベストアンサー
- JavaScript
- Access クリック 挙動 ダブルクリック？
こんにちは。 Access勉強中の初心者です。 初歩的な質問になるかと思いますが、どうぞよろしくお願いいたします。 今、Accessでシステムを構築している最中ですが Accessの挙動がおかしくなったため、質問させていただきました。 現在の症状としましては 1.フォームにボタンを配置 2.ボタンにVBAコードでダイアログを表示 3.ダイアログでファイルを選択 4.『OK』ボタンにてファイルを確定・読み込み 5.読み込み完了 で動作しております。 当初は問題なく動作していたのですが 4のファイルを選択してボタン押下時、以前はシングルクリックだったのが 現在はダブルクリック(※)で動作する仕様になりました。 特におかしなコードはないと思うのですが 突然このように挙動が変わったりするのでしょうか。 ワンクリックで読み込みを開始したく思いますので 改善策があれば教えてくださいませ。 ※ ダブルクリックといいますか、 1.ファイルを選択 2.OKボタンクリック（1回では効果なし） 3.その後、クリックやキーボードで（何かしらアクションを起こすと）読み込みが開始されます。 1.ファイル選択 2.タブでOKボタンまで移動 3.エンター押下 だと1エンターで読み込みが開始されます。 乱文、失礼いたしました。
- ベストアンサー
- その他(データベース)
- 【ｊｓ】attrで属性を取得するとき・・・
js初心者です。 div全体をクリックしてリンクできるようにしたいと思い、下記ソースを書いています。 （js） <script type="text/javascript"> $(function(){ $(".go_content").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); }); </script> （html） <div class="go_content"> テキストが入りますテキストが入ります。 <a href="http://xxxxxxx" target="_top" ></a> </div> これで、通常なら思ったとおりに動作してくれます。 しかし、このソースはあるページのなかにiframeで表示させます。 なので、<a>にtarget="_top"を指定しています。 上記スクリプトのままだと、aのhref属性しか取得できずに、フレーム内でリンクしてしまいます。 一緒にtarget属性も取得するにはどうすればよいのでしょうか？ 何か良い方法があれば教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとございます。 教えて頂いた方法で動作は確認できました。 私もjsなどは最初に読み込む方がいいと思います。 今回は技術的にはできることを見せなければいけない事情がありまして このような方法を取りました。 おっしゃるようにできるだけjsファイルはまとめておきたいと思います。 脱線事項のご指摘もありがとうございます。 参考にさせていただきます。