外部のJavaScriptを読み込んだ後でそれに依存した関数を実行するjQuery plugin
jQueryに標準で入っているjQuery.getScript関数で良い。
Ajaxianの記事でこんなのを見つけてインスパイアされてつくった。
やっつけなのでFirefox3でしか動作確認してない。
pluginのコード
(function($){ $.extend($,{ includeAndRun:function(scriptUrl,callback){ var s = $('<script/>') .attr({ src:scriptUrl, language:'javascript', type:'text/javascript' }) .bind('load',function(e){ $(this).remove(); callback(); }) .get(0); $('head').get(0).appendChild(s); } }); })(jQuery);
せつめー
とりあえずscript要素のloadイベントにお掃除とcallback関数の実行を突っ込んでみた。
Firefox3でやったらreadystatechangeは拾えなかったんからloadイベントだけ使ったんだけど、これはなんなんだぜ?
$('').attr〜中略〜.appendTo('head')みたいに
jQueryでscript要素をappendするとロード後に消されるのでDOM要素を取り出してやった。
使い方
$.includeAndRun('http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js',function(){firebug.init();});
第一引数に読み込むJavaScriptのURL、第二引数にcallback関数を渡す。
これだとFirebug LiteのJavaScriptをロードした後に初期化メソッドを実行してconsoleを開いてくれる。
includeAndRun pluginを少し弄ってみた
jQueryに標準で入っているjQuery.getScript関数で良い。
pluginのコード
(function($){ $.extend($,{ includeAndRun:function(scriptUrl,callback){ var s = $('<script/>') .attr({ src:scriptUrl, language:'javascript', type:'text/javascript' }); if($.browser.msie){ s.bind('readystatechange',function(e){ if (this.readyState === 'loaded') { setTimeout(callback,50); } }); }else{ s.bind('load',function(e){ $(this).remove(); callback(); }); } $('head').get(0).appendChild(s.get(0)); } }); })(jQuery);
せつめー
どうもreadystatechangeイベントはIEとOperaで拾えるようだ。
Operaではloadイベントが拾えるのでOperaの場合もとりあえず無視。
IEの場合限定でイベントを登録することにしたけど、
元ネタに出てきた「this.readyState === 'complete'」という状態にはならないようで、
"loaded"までしか行かない。
おまけにその時点でもscriptの内容が実行されていない
or 実行されていることが保障されていないようなので、
とりあえずsetTimeoutしてみたけど、
指定した時間よりも読み込んだJavaScriptを実行するのにかかる時間が長ければアウト。
もすこし勉強してみないといけないなあ。
Firebug Liteの表示非表示をEscキーで切り替える
includeAndRun pluginを使う。
これと↓のjsファイルをてきとーに作ってHTMLの中でscriptタグで読み込んでやる。
$(function(){ $.includeAndRun('http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js',function(){ firebug.init(); firebug.win.close(); var eventName = 'keypress.firebug-lite-toggle'; $($.browser.msie ? document.body : window) .bind(eventName,function(e){ if(e.keyCode == 27){ var isFireBugLiteOpened = !!$('#Firebug').size(); if(isFireBugLiteOpened){ firebug.win.close(); }else{ firebug.init(); } } }); }); });
いろいろ試行錯誤した結論