jQueryの読み込み方法について

2023/08/16 16:28

このQ&Aのポイント

jQueryの読み込み方法について試行錯誤しています。性能やサポート環境を考慮し、適切な読み込み方法を見つけたいです。
現在、CGIスクリプト上でjqueryの読み込みを判断していますが、外部JavaScriptを使用することを検討しています。しかし、巨大なライブラリを読み込むことに懸念があります。
モバイルデバイスには問題なく動作するものの、非使用時に大きなライブラリを読み込むことに抵抗があります。動的かつ問題なくjqueryをJavaScriptで読み込む方法はあるのか知りたいです。

ベストアンサー

jquery自体をJavaScriptで読み込む

2012/08/01 01:11

以下のようなものを想定して、jquery.js という中身がjqueryでないものから jqueryの実態を読み込みをさせようとしているのですが、うまくいきません。・jquery 2以降は、IE8以前をサポートしなくなるので、useragentで　読み込むjqueryを選択したい。・現在、CGIスクリプト上で、jqueryの読み込みを判断しているが、できれば　外部JavaScriptで巨大なjqueryの読み込みの判断をさせたい。・キャッシュされたとしても、ライブラリであることから、圧縮して７０ｋバイトと　あまりにも巨大である・(googleapiを利用すると、IE8以前では、プライバシーの警告が出る場合がある）確かに、スマホにjqueryを普通に読み込ませても、何も問題なく動作しますが、相当がんばって圧縮をしても70kバイト程度のライブラリを、使用しないのに読み込むというのも気が引ける部分もあります。何とか、動的に、かつ、何も問題なく、jqueryをJavaScriptで読み込む方法はあるでしょうか？このようなコードは、document.bodyがnullであるため、はじかれてしまいます。 var script = document.createElement('script'); script.src = 'http://hoge/jquery-1.js'; document.body.appendChild(script); var callee = arguments.callee; var interval = setInterval(function() { if (!document.evaluate) return; clearInterval(interval); interval = null; callee(); }, 100); このコードでも、jqueryを使用するものが、jQueryがないというエラーで、うまくいきません var scrptE = document.createElement("script"); scrptE.setAttribute("type", "text/javascript"); scrptE.setAttribute("language", "JavaScript"); scrptE.setAttribute("src", "http://hoge/jquery-1.js"); document.getElementsByTagName("head")[0].appendChild(scrptE); 以下のようなのは、googleapiのため、使わないものと考えます。 http://phpjavascriptroom.com/?t=ajax&p=jquery よろしくお願いします。

春原なの（@ymda）
お礼率60% (1820/2985)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

luka3
ベストアンサー率74% (297/399)

2012/08/06 10:59 回答No.1

中身がどうされたいのかよくわからないのでヒントにしかならないと思いますが、、、 ≫document.bodyがnullであるためということであれば <body onload="jqueryload()"> にするとか、いっそのこと、 document.write('<script type="text/javascript" src=… にしてみるとかはどうでしょう。

質問者

お礼 2012/08/11 21:54

ありがとうございます。 XHTMLの可能性もあるので、document.writeは使えません。もう一度ソースや検索をしなおしたら、jquery のオブジェクトが初期化されていないようで、順番を指定して全部外部から読み出すことにしたら、うまくいきました。 loadScript("1,hoge.js","9,jquery.js","8,jqueryutil.js"); // ↑先頭の番号の逆順に読み込む function loadScript() { var l=new Array(); var i=0; for(var script in arguments) { var _t=arguments[script].split(","); l[i]=new ag(_t[1],_t[0]); i++; } l.sort(cmp); l.reverse(); for(var list in l) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = l[list].n; (document.getElementsByTagName('head').item(0) || document.body).appendChild(script); } }

その他の回答 (1)

tracer
ベストアンサー率41% (255/621)

2012/08/06 23:43 回答No.2

普通に条件分岐ではだめなんですかね。オフィシャルにもあるぐらいなので堅い方法だと思いますよ。   <script src="jquery-2.0.0.js"><</script>

参考URL：: http://blog.jquery.com/2012/06/28/jquery-core-version-1-9-and-beyond/

質問者

お礼 2012/08/11 21:48

ありがとうございます。 HTMLからは、jquery.js そのものしか読み込めないことを仮定していますので、これは該当できないです。

関連するQ&A

javascriptで困っています。教えてください
JavaScriptで配列をPOST送信しようとしています。 <form>や<input>を作っておいてではなく、javascriptで生成する関数からしたいと思っています。以下のコードでうまくいきません。教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html> <head> <script type="text/javascript"> var ar = new Array(5); ar[0] = 111; ar[1] = 222; ar[2] = 333; ar[3] = 444; ar[4] = 555; function sampleForm(value){ var form = document.createElement('form'); document.body.appendChild( form ); var input = document.createElement('input'); input.setAttribute('type','hidden'); input.setAttribute('name','hidden_input'); input.setAttribute('value', value); form.appendChild(input); form.setAttribute('action','send.php'); form.setAttribute('method','post'); form.submit(); } </script> </head> <body> <a href=“javascript:sampleForm(ar)”>クリックしたら“samplepost”をPOST送信</a> </body> </html> send.php-------------------------------- <?php $num = isset($_POST['hidden_input']) ? $_POST['hidden_input'] : null; print "num: " . $num; ?>
- ベストアンサー
- JavaScript
javascriptでカレンダーを作る方法
下に書いてあるjavascriptを書き換えて、一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1～30まで一マスごとに数字を入れられ、sun・5・12・19・26は赤文字で書かれ、1より前のマスや30以降のマスは空欄のカレンダーを作るにはどうすればいいでしょうか？ <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<4;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); var txt=i*7+j+1; td.appendChild(document.createTextNode(txt)); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>
- ベストアンサー
- その他（学問・教育）
CakePHPでjQueryを使うには
ローカル環境にてCakePHPでwebサービスを制作しています。ブラウザでviewを確認しながら構築しているのですが、この環境でgoogleAPIのjQueryを動作させることは出来るのでしょうか？もしできるとしたら、 <?php echo $this->Html->script('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> で動かないのは何が問題なのでしょうか？また、googleAPIを使わない方法でも以下のように試しましたが、これも動かない原因はどこにあるのでしょうか？ jQueryのホームページでver1.5のソースをコピーし作ったjQuery1.5.jsを、 webroot /jsに入れる。 Controllerに var $helpers=array('Ajax','Javascript'); を記述。 Viewに、 <?php echo $javascript->link('jQuery.1.5.js'); ?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> 宜しくお願いします。
- ベストアンサー
- オープンソース開発
記述方法について
よろしくお願いします。前回こちらで教えて頂いたソースを基に表示するテーブルの並び方を変えたいと思っています。理想の並び方は、例としてくまさる　　　　　　　　　　　くま　　さるごりら　　これらを→ごりら　うま　うま　　　　　　　　　　　りすりすというように読み込んだエクセルのレコードを2列ずつにして表したいのですが、可能でしょうか？以下のソースを基に、色々試したのですが、ブラウザ上には何も出てきません。 -------------------------------------------------------------- <html> <head> <title>TEST CSV IN</title> <script type="text/javascript"> function hoge(){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("border","1"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; while (!rs.EOF){ var tbl = document.createElement("table"); table.setAttribute("border","1"); var td = document.createElement("td"); for(var i=1; i<2; i++){ 　　var tr = document.createElement("tr"); 　　trs[0] = document.createElement("tr"); 　　trs[1] = document.createElement("tr"); 　　trs[2] = document.createElement("tr"); tds[0] = document.createElement("td"); tds[1] = document.createElement("td"); tds[2] = document.createElement("td"); var img = document.createElement("img"); img.setAttribute("src",rs.fields(0)); img.setAttribute("alt",""); tds[0].appendChild(img); tds[1].innerText = rs.fields(1); tds[2].innerText = rs.fields(2); trs[0].appendChild(tds[0]); trs[1].appendChild(tds[1]); trs[2].appendChild(tds[2]); tr.appendChild(trs[0]); tr.appendChild(trs[1]); tr.appendChild(trs[2]); tbody.appendChild(tr); } rs.MoveNext; } table.appendChild(tbody); output.appendChild(table); } </script> </head> <body onload="hoge();"> CSV DATA IMPORT Ver MINO <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="cn.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> <div id="OUTPUT"> </div> </body> </html> ------------------------------------------------------------- javascriptを始めたばかりなので、まだよく理解していないので大変申し訳ありませんが、ご指導願えればと思います。よろしくお願いします。
- ベストアンサー
- JavaScript
このソースはJavaScriptですか？
Webサイトの作成のためにJavascriptやJQueryについて勉強しようと思っており、いろんなサイトを調べてみたら、次のようなソースが書かれていることが多いです。 var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-746118-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); たぶんJavaScriptかJQueryだと思いますが、これは一体どのような命令文なのでしょうか？このソースを多くのサイトで使っているのならば、私も試してみたいと思っております。初心者ですが、宜しくお願い致します！！
- ベストアンサー
- JavaScript
画面が遷移したみたいになってしまいます。
画面ロード後にjavascriptで動的にまたjavascriptタグを表示しています。以下のjavascriptを組み込んでみたところ、取得したjavascriptを表示したときに画面遷移したみたいになってしまいました。どうすればきちんと表示されるようになるでしょうか。 <div id="position"></div> <script language="javascript">// </script> http://hogehoge/getjsからはコンテンツの部品を表示するjavascriptが入っています。
- 締切済み
- JavaScript
ブログパーツのjquery利用について
ブログパーツでjqueryを使用してhtmlなどを出力したいのですが、思い通りの動作ができません。 jsファイルの中身 ------------------------------------------------------------ document.write("<script type='text/javascript' src='http://hoge.com/jquery.js'></script>"); document.write('<link rel="stylesheet" type="text/css" href="http://hoge.com/hoge.css">'); $(function() { $("div").html("<p>aaaaaaaaa</p>"); }); document.write('<div></div>'); ------------------------------------------------------------ これじゃあ、ほかのサイトからjsを読み込んでも出力されないのでしょうか？（<script src="http://hoge.com/hoge.js"></script>） document.write("<div>aaa</div>");だけであれば、ちゃんと出力されるのでjqueryの記述がおかしいのだと思います。ご教授お願いいたします。
- ベストアンサー
- AJAX
prototype+jquery+プラグイン
prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。何かいい方法はないでしょうか？エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>
- 締切済み
- JavaScript
jqueryのscrollfollowが動かない
jqueryのscrollfollowが他のスクリプトと衝突しているようで動きません。解決方法はありますか？スライドショー用のスクリプトを記述すると、動かなくなります。スライドショー用の記述を削除すると、scrollfollowはちゃんと機能してくれます。おそらく、このスライドショーのスクリプトと衝突して動かなくなってるのだと思いますが、解決方法はあるのでしょうか？どたなか、よろしければお助けください。以下が、現在のソースです。（「※」マークのところがそのスクリプトの記述部分です） ----------------------------------------------------------- （※ここからがscrollfollowのスクリプトです。） <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.scrollfollow.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('#sidebar1').scrollFollow({ speed: 500, killSwitch: 'sidebar12' }); }); </script> （※ここまでがscrollfollowのスクリプトです。） <script type="text/javascript" src="smoothscroll.js"></script> <script type="text/javascript" language="JavaScript">  </script> （※画面一番上メインにスライドショーを設置していて、ここからがそのスクリプトです。下記のスクリプトを削除するとscrollfollowは正常に機能してくれます。記述すると動きません。）  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script> <script type="text/javascript"> $(function(){ $('.slideshow').panelGallery(); }); </script> （※画面一番上メインにスライドショーを設置していて、ここまでがそのスクリプトです。） ------------------------------------------ 以上です。よろしくお願いいたします！
- ベストアンサー
- JavaScript
JSONPを処理するにはどうすればいいですか？
http://www.baldanders.info/spiegel/remark/archives/000222.shtml このページの下部のサンプルスクリプトを function getjsonp(url){ で囲ってurlを渡してJSONPデータを処理しようとしたのですが、 hundler is not defined とエラーが出てしまいます。サンプルスクリプトのそのままのコードでは動くのです。オブジェクト指向がよくわかっていないのでどうすればいいか、識者の方教えてください。宜しくお願いします。下記がエラーするスクリプトです。 <script type="text/javascript" src="/js/jsr_class.js"></script> <div id="bookmark"></div> <script type="text/javascript"> var url ='http://del.icio.us/feeds/json/spiegel?callback=hundler'; getjsonp(url); function getjsonp(url){ var oJsr = new JSONscriptRequest(url); oJsr.buildScriptTag(); oJsr.addScriptTag(); function hundler(data) { var ul = document.createElement('ul'); for (var i=0, post; post = data[i]; i++) { var li = document.createElement('li'); var a = document.createElement('a'); a.setAttribute('href', post.u); a.appendChild(document.createTextNode(post.d)); li.appendChild(a); ul.appendChild(li); } document.getElementById('bookmark').appendChild(ul); oJsr.removeScriptTag(); } } </script>
- ベストアンサー
- JavaScript

jQueryの読み込み方法について

jquery自体をJavaScriptで読み込む