2012/02/26

[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というちょっと複雑な気分。

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

0 コメント:

コメントを投稿