でぃべろっぱーず・さいど

Greasemonkey勉強会で紹介したJavaScriptのTips。

hoge.jsにhogeFuncが定義されていて、hoge.jsを読み込んですぐにhogeFuncを実行したいとき。

↓こんな風に書いちゃうと、エラーになってしまいます。

var s = document.createElement('script');
s.type='text/javascript';
s.charset = 'utf-8';
s.src = 'hoge.js';
document.getElementsByTagName('head')[0].appendChild(s);
hogeFunc();//この時点ではまだhoge.jsがロードされていない可能性が高い

hoge.jsのscriptタグをappendした後、実際にhoge.jsがダウンロードされ、JavaScriptが解釈されるまではhogeFuncは実行できません。

ということで、↓こんな風にしてsetIntervalで定期的に処理を実行してやればOK。

var s = document.createElement('script');
s.type='text/javascript';
s.charset = 'utf-8';
s.src = 'hoge.js';
document.getElementsByTagName('head')[0].appendChild(s);
var timerId = setInterval(timerFunc,100);//100msecごとにtimerFunc()を実行
function timerFunc(){
  if(window.hogeFunc){
    clearInterval(timerId);//100msecごとに実行している処理を停止
    hogeFunc();//ロードされているのでエラーが起こらない
  }else{
    //hogeFuncが定義されていない場合はここを通る。=何もしない
  }
}