[jQuery][JavaScript]動的にscriptタグを生成する

だいぶ前に、動的にscriptタグを生成する方法について書きました。

最近、jQueryにはまっていることもあり、jQueryを使ってもっとかっこよく作ることはできないのかなーっと調べていました。

結論からいうと、難しいようです。

jQueryのappend,prepend,before,afterメソッドにscriptタグを含んだDOM要素なり文字列なりを渡したときは、script以外の部分はちゃんと追加されますが、scriptタグの部分は追加されずに、スクリプトがその場で実行(eval)されてしまうのだそうです。

via:headタグに要素を追加できない。

そこで、いつもどおり、native javascriptで、上のエントリーを参考に、粛々と書くことにします。

var script = document.createElement('script'); script.setAttribute("type", "text/javascript"); script.setAttribute("src", 'hoge.js'); document.getElementsByTagName("head")[0].appendChild(script);

ただし、これだと、いつロードされたのかわからない。なので、JAVASCRIPTファイルの動的ロード方法を読みながら少し、処理を追加する。

var script = document.createElement('script'); script.setAttribute("type", "text/javascript"); script.setAttribute("src", 'hoge.js'); if($.browser.msie){ script.onreadystatechange = function(){ if(script.readyState == 'complete' ||script.readyState == 'loaded'){ loaded(); } }; }else{ script.onload = function(){ loaded(); }; } document.getElementsByTagName("head")[0].appendChild(script); function loaded(){ }

試したところ、正常終了。

ブラウザ判定の部分だけ、jQueryというちょっと複雑な気分。

もっと楽に作れないのかなー。。。