人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptのwindow.onloadについて教えてください。

外部サイト(ブログや他サイト)で利用する簡単なツールを作っています。

<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をロードさせたいと考えています。

よろしくお願いします。

●質問者: tmshare
●カテゴリ:インターネット ウェブ制作
✍キーワード:hoge HTML JavaScript jQuery js
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● akumasyougun666
●0ポイント

大変申し訳ございませんが、あなたはこの質問に回答することはできません。

http://q.hatena.ne.jp


2 ● GoldenDawn
●30ポイント

テストコードはこのような感じでしょうか。

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) ;

のように遅らせるとうまくいく場合もありますが、サーバの反応が悪いと間に合わない場合もあり得ます。

次のページに読み込みを待つ例があります。

http://d.hatena.ne.jp/holidays-l/20061207/p1

◎質問者からの返答

ありがとうございます。読み込み完了前にjqueryを使おうとしていたから表示されなかったのですね。原因がわかってすっきりしました。

setTimeoutで適当な待ちをいれたら問題なく表示できました。

リンクしてもらったURLから例を見たところ、下記の更新版があったのでこれで試してみました。

http://d.hatena.ne.jp/holidays-l/20070923/p1

問題なく動作するようだったのでこれを使おうかと思っていたところ、Google Codeからは問題なく読み込めるのですが、なぜか他のライブラリ(nyroModal)を任意のURLに指定すると読み込めませんでした。原因に関しては不明ですが、前述の方法で読み込みが出来ていますのでこれで進めてみたいと思います。


3 ● ぱこち
●30ポイント

現在だと、この例で言うと 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つのスクリプトを読み込ませるとうまく表示いきますが、できれば余計なスクリプトファイルは作りたくないと思っています。

もしよろしければどこに記述すればよいか教えていただけると助かります。


4 ● ぱこち
●70ポイント ベストアンサー

先ほど回答したサイトのスクリプトを少しいじって、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はご指摘いただきましたので使うつもりはないのですが、動作に差があるのはなぜかなと悩んでいます。

度々で恐縮ですがもしご存じでしたら教えていただけると助かります。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ