動的に JavaScriptを読み込む

srcに url突っ込むのは割りと広く知れているようですが、困ったのは書き込む場合。
DOM で script要素を作成して、jsファイルを読み込んだり、書き込んだりする手法です。

JavaScriptを JavaScript内で構成して、これをscript要素に突っ込むのはどうすれば良いのかちょいと試してみました。

関数（09/12/26）
javascript:同期／非同期で動的なjavascriptの読込み３種
※ コードは url 指定

参考（06/11/17）
サンプルとクロスな調査はこちら

■ まずは外部スクリプトファイルを読み込む場合

var ele = document.createElement("script");
ele.type = "text/javascript";
ele.src = "外部 jsファイルの url";
document.body.appendChild(ele);

てな感じで、script要素を作成してドキュメントに投入。

これに関するサイト
http://www9.plala.or.jp/oyoyon/html/script/append.html
http://clouder.jp/yoshiki/mt/archives/000631.html
http://la.ma.la/blog/diary_200504140039.htm

特に最速インターフェース研究会さんがおっしゃってる。
動的にデータを読む場合 script要素ならドメイン違いの制約を受けないってのがいいですね。


■ 外部スクリプトではなく生成したコードを突っ込む場合

var ele = document.createElement("script");
ele.type = "text/javascript";
ele.text = "突っ込むコード";
document.body.appendChild(ele);

てな感じ。srcから textに代えただけですｗ
が、これ苦労しました。
注意）試行錯誤の結果なので、正規手段かどうかは不明です。
一応、internet explore/firefox など主要なブラウザではＯＫのようです。
参考（06/11/17）サンプルとクロスな調査はこちら

例えば、div要素を動的に作成する場合
var ele = document.createElement("div");
var str = document.createTextNode("突っ込みたい文字列");
ele.appendChild(str);

のように、document.createなんたらのようにやるのが行儀の良いやり方だと思ってました。
しかも innerHTMlとか innerTextではなくてただの text 他にも textContentなんてのもありますが、確か ieには無くて断念。
色々試したところ textで可能と判明しました。

うｍｍ。DOMのオフィシャルなドキュメントを読みに行かない所がぐーたらだなぁ。
だってね回りくどくて長ったらしくて要領を得ないんだよね。あーいうのって。もうどーにもならん時だけｗ

他、情報もってる方あったらよろしくです。他力本願驀進か！？


■ その他

他、こんなものもあります。
http://d.hatena.ne.jp/lurker/20060813/1155432961

永続化。これはまた魅力的な話です。
ちなみにGreasemonkey とは、Firefox ブラウザの拡張機能でページの見た目や機能をブラウザ側でカスタマイズできるもの。
IEだと、Trixieというものがあるそうです。Opera8だと標準機能だそうです。

Comments

こんにちは。
JSONPで外部スクリプトファイルを読み込むのは、実証済みでしたが、
生成したコードを突っ込んだ事がなかったので、参考にさせていただきました。有難うございます。
しかし、Safari2.04(MacOSX)ではだめでした。（エラーも出ません）
そこで試したところ、createTextNodeを作りappendChildするという通常のやり方でOKでした。
以上、参考になれば幸いです。

Posted by トウヘル at 2007年09月03日 01:29

コメント、情報ありがとうございます。
Ｍａｃの環境が無いので、そのような有益情報を貰えると、非常にありがたいです。

最近、更新サボってますがｗ
励みになります。

Posted by Hifa at 2007年09月03日 01:35

>■ 外部スクリプトではなく生成したコードを突っ込む場合
>var ele = document.createElement("script");
>ele.type = "text/javascript";
>ele.text = "突っ込むコード";
>document.body.appendChild(ele);
を
参考にさせていただきました。
ele.text で VBAからもOKでした。
( http://d.hatena.ne.jp/ken3memo/20100428/1272467509 の 記事で引用とリンク/紹介してます)
とても助かりました。またおじゃましたときはよろしくお願いします。

Posted by Ken3 at 2010年04月29日 01:49

お役に立てて何よりです。
リンク先拝見しました。当初、利用先があんまり思いつかないなぁーなんて思っていましたが、VBA から挿入って面白いですねー。そんな発想はなかったです＾＾
javascript は、関数から定数まで再定義出来るのでホント面白いです。undefined ですら書き換えられたりするので、反対の動作をさせることもｗ

Posted by HiFa at 2010年05月01日 17:21