外部サイト(ブログや他サイト)で利用する簡単なツールを作っています。
<script type="text/javascript" src="http://www.example.com/hogeA.js"></script>
といったタグを貼り付けて使うつもりです。
このツールはjqueryを使っているのですが、外部サイトがjqueryを使っているとは限らないので、hogeA.jsでjqueryをロードする必要があります。
window.onload=function() {
var script01 = document.createElement('script') ;
script01.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' ;
script01.type = 'text/javascript' ;
document.getElementsByTagName('head')[0].appendChild(script01) ;
}
上記のような形で試しているのですが、上記コード+確認用のコード$("#hoge").text("OK");で動かしても"OK"が表示されません。window.onloadの上部にdocument.write("-<略>-");を記述するとjqueryがロードされますが、1回目はjqueryがない状態で動作し、2回目以降はjqueryが動作している想定通りの動きになります。
hogeA.jsを読んだタイミングでjqueryをロードさせるにはどのようにしたらよいでしょうか?jqueryを読み込んだ後に外部HTMLをロードさせたいと考えています。
よろしくお願いします。
先ほど回答したサイトのスクリプトを少しいじって、document.write 相当の動作をするようにしました。
(function(scripts, callback, errorback) { var current_position = (function (e) { if(e.nodeName.toLowerCase() == 'script') return e; return arguments.callee(e.lastChild) })(document).parentNode; if (typeof errorback != 'function') errorback = function(url) { alert('jsloader load error: ' + url) }; var load = function(url) { var script = document.createElement('script'); script.type = 'text/javascript'; script.charset = 'utf-8'; var current_callback; if (scripts.length) { var u = scripts.shift(); current_callback = function() { load(u) } } else { current_callback = callback; } if (window.ActiveXObject) { // IE script.onreadystatechange = function() { if (script.readyState == 'complete' || script.readyState == 'loaded') current_callback({ type:"load", target:this }); } } else { script.onload = current_callback; script.onerror = function() { errorback(url) }; } script.src = url; current_position.appendChild(script); } load(scripts.shift()); })(['http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'], function(e) { $(function(){ // jQuery のおまじない // この辺にあなたのしたい処理を書いて下さい。 $(e.target).before('ここに document.write で書くつもりだった中身を書いて下さい。<a href="./"><img src="./test.png" /></a> とか。'); }); // jQuery のおまじない終点 });
要らぬお節介かも知れませんが、もしお作りになるツールが、ブログパーツのような不特定のページから読み込まれるようなものでしたら、window.onload や document.write は使用しない方が良いと思います。
window.onload は他のスクリプトの onload イベントを上書きしてしまうかもしれません。 (addEventListener などを使うのなら話は別ですが。)
また、document.write は、ページによっては使えないことがあるからです。 (具体的には application/xhtml+xml のページで使えません。)
テストコードはこのような感じでしょうか。
window.onload=function() { var script01 = document.createElement('script') ; script01.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' ; script01.type = 'text/javascript' ; document.getElementsByTagName('head')[0].appendChild(script01) ; $("#hoge").text("OK") ; } script>
appendChild した場合、jquery.min.js の読み込み完了前に $("#hoge").text("OK") ; を実行しようとするためうまくいきません。
setTimeout(function(){$("#hoge").text("OK")}, 1000) ;
のように遅らせるとうまくいく場合もありますが、サーバの反応が悪いと間に合わない場合もあり得ます。
次のページに読み込みを待つ例があります。
ありがとうございます。読み込み完了前にjqueryを使おうとしていたから表示されなかったのですね。原因がわかってすっきりしました。
setTimeoutで適当な待ちをいれたら問題なく表示できました。
リンクしてもらったURLから例を見たところ、下記の更新版があったのでこれで試してみました。
http://d.hatena.ne.jp/holidays-l/20070923/p1
問題なく動作するようだったのでこれを使おうかと思っていたところ、Google Codeからは問題なく読み込めるのですが、なぜか他のライブラリ(nyroModal)を任意のURLに指定すると読み込めませんでした。原因に関しては不明ですが、前述の方法で読み込みが出来ていますのでこれで進めてみたいと思います。
現在だと、この例で言うと script01 の onload イベントや onreadystatechange イベントを見て、読み込み完了を知るような方法がよく使われているみたいです。
Hatena::Let でも、さっくりしたのが使われていたなあと思って調べたら、開発者さんのブログに載っていました。
window.onload = function() { __jsloader__(['http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'], function() { $("#hoge").text("OK"); }); };
と書けば、「OK」が表示されました。
ありがとうございます。提示いただいたスクリプトで読み込めました。jQuery以外のライブラリ(nyroModal)も問題なく読み込めています。
このスクリプトで読み込んだ後にdocument.writeで表示する画像やリンクなどを作ろうとしたのですが、今度はここでうまくいっていません。別スクリプトにdocument.writeをべた書きして外部サイト側で2つのスクリプトを読み込ませるとうまく表示いきますが、できれば余計なスクリプトファイルは作りたくないと思っています。
もしよろしければどこに記述すればよいか教えていただけると助かります。
先ほど回答したサイトのスクリプトを少しいじって、document.write 相当の動作をするようにしました。
(function(scripts, callback, errorback) { var current_position = (function (e) { if(e.nodeName.toLowerCase() == 'script') return e; return arguments.callee(e.lastChild) })(document).parentNode; if (typeof errorback != 'function') errorback = function(url) { alert('jsloader load error: ' + url) }; var load = function(url) { var script = document.createElement('script'); script.type = 'text/javascript'; script.charset = 'utf-8'; var current_callback; if (scripts.length) { var u = scripts.shift(); current_callback = function() { load(u) } } else { current_callback = callback; } if (window.ActiveXObject) { // IE script.onreadystatechange = function() { if (script.readyState == 'complete' || script.readyState == 'loaded') current_callback({ type:"load", target:this }); } } else { script.onload = current_callback; script.onerror = function() { errorback(url) }; } script.src = url; current_position.appendChild(script); } load(scripts.shift()); })(['http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'], function(e) { $(function(){ // jQuery のおまじない // この辺にあなたのしたい処理を書いて下さい。 $(e.target).before('ここに document.write で書くつもりだった中身を書いて下さい。<a href="./"><img src="./test.png" /></a> とか。'); }); // jQuery のおまじない終点 });
要らぬお節介かも知れませんが、もしお作りになるツールが、ブログパーツのような不特定のページから読み込まれるようなものでしたら、window.onload や document.write は使用しない方が良いと思います。
window.onload は他のスクリプトの onload イベントを上書きしてしまうかもしれません。 (addEventListener などを使うのなら話は別ですが。)
また、document.write は、ページによっては使えないことがあるからです。 (具体的には application/xhtml+xml のページで使えません。)
ありがとうございます。サンプルまで作っていただき感謝です。
> 要らぬお節介かも知れませんが、もしお作りになるツールが、ブログパーツのような不特定のページから読み込まれる
> ようなものでしたら、window.onload や document.write は使用しない方が良いと思います。
お節介どころか、ずばりブログなどのサイトで使うためのツールを意識していました…。ご指摘いただき非常に助かります。
javascriptはさわり始めたばかりで勉強不足ですので、いただいたサンプルを元に勉強したいと思います。
試してみたところjQueryの動作は問題なさそうです。.beforeの箇所にpタグを入れて文字を出力できました。
$(e.target).before(~)にaタグを記述し、「class="nyroModal"」をタグ内に追記してjquery.nyroModalを使用しているのですが、ただのリンクとして画面遷移します。上記スクリプトの後にdocument.writeをべた書きしたスクリプトを流すと、そちらではちゃんとnyroModalが使われた動きになります。
document.writeはご指摘いただきましたので使うつもりはないのですが、動作に差があるのはなぜかなと悩んでいます。
度々で恐縮ですがもしご存じでしたら教えていただけると助かります。
ありがとうございます。サンプルまで作っていただき感謝です。
> 要らぬお節介かも知れませんが、もしお作りになるツールが、ブログパーツのような不特定のページから読み込まれる
> ようなものでしたら、window.onload や document.write は使用しない方が良いと思います。
お節介どころか、ずばりブログなどのサイトで使うためのツールを意識していました…。ご指摘いただき非常に助かります。
javascriptはさわり始めたばかりで勉強不足ですので、いただいたサンプルを元に勉強したいと思います。
試してみたところjQueryの動作は問題なさそうです。.beforeの箇所にpタグを入れて文字を出力できました。
$(e.target).before(~)にaタグを記述し、「class="nyroModal"」をタグ内に追記してjquery.nyroModalを使用しているのですが、ただのリンクとして画面遷移します。上記スクリプトの後にdocument.writeをべた書きしたスクリプトを流すと、そちらではちゃんとnyroModalが使われた動きになります。
document.writeはご指摘いただきましたので使うつもりはないのですが、動作に差があるのはなぜかなと悩んでいます。
度々で恐縮ですがもしご存じでしたら教えていただけると助かります。