2006年08月25日

動的に JavaScriptを読み込む

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

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

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



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

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に代えただけですw
が、これ苦労しました。
注意)試行錯誤の結果なので、正規手段かどうかは不明です。
一応、internet explore/firefox など主要なブラウザではOKのようです。

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

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


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

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

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


その他

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

永続化。これはまた魅力的な話です。
ちなみにGreasemonkey とは、Firefox ブラウザの拡張機能でページの見た目や機能をブラウザ側でカスタマイズできるもの。
IEだと、Trixieというものがあるそうです。Opera8だと標準機能だそうです。
posted by HiFa at 21:54 | Comment(4) | TrackBack(1) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする
>>> スパムコメントは消してますよん。 お互い無駄な労力は避けましょう。 <<<

この記事へのコメント

こんにちは。
JSONPで外部スクリプトファイルを読み込むのは、実証済みでしたが、
生成したコードを突っ込んだ事がなかったので、参考にさせていただきました。有難うございます。
しかし、Safari2.04(MacOSX)ではだめでした。(エラーも出ません)
そこで試したところ、createTextNodeを作りappendChildするという通常のやり方でOKでした。
以上、参考になれば幸いです。
Posted by トウヘル at 2007年09月03日 01:29
コメント、情報ありがとうございます。
Macの環境が無いので、そのような有益情報を貰えると、非常にありがたいです。

最近、更新サボってますがw
励みになります。
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 ですら書き換えられたりするので、反対の動作をさせることもw
Posted by HiFa at 2010年05月01日 17:21
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

JavaScript:JavaScript で、他のJavaScript を読み込む方法
Excerpt: 無料ブログでJavaScript を仕込むとき、メインのScript を別のJavaScript にしておくと、手直しするのに楽です。 次のようにすると、別ファイルとして読み込めます。 
Weblog: むずむずサイト製作:凝ったきれいなブログのコツ
Tracked: 2009-11-22 00:55
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。