動的な JavaScript の生成と読み込み＆入れ替え

以前 src や text を使って javascript の動的な読み込みや書き込みをしたんですが、そのサンプルと安全性？クロス？な調査です。

前回の記事はこちら
トウヘル さんから safari の情報を頂いています。

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

実際の所、createElement なんぞしなくても空の script タグ書いて、getElementsByTagName や、getElementById で取得したエレメントに src や text を突っ込んでやれば幾らでも「動的な読み込み」や「書き込み」は可能です。

ちなみに ie は、何度も書換えられますが、FireFox はどうやら１回だけ。１度読んでしまうと上書きのようなことは出来ないようです。実際、スクリプトエレメントを削除しても生きているようです。

　動的な生成と読み書き＆入れ替えのサンプル

下はサンプル。単体の html はこちら

---

・ スクリプトタグに直接書き込む



・ 外部スクリプトを読み込む

---

ポチポチ押してれば、生成と削除＆入れ替えしているのが分かるかな？と。
んが、下のリスト順に確認すると分かりやすい？

1. 最初、「結果」は未定義で、「html」では、追加 script タグ無し。
2. 「生成」後、「結果」は未定義で、「html」では最後に script タグ付加。
3. 「スクリプト１」や「２」を押すと、「結果」や「html」確認でスクリプトが入れ代るのが分かる。
4. 一旦、「スクリプト３」や「４」を押すと、「１」や「２」のスクリプトは無視。
   これは src 属性のある script タグ内に記述されるスクリプトが無効なのと同じ。
   
   
5. 「削除」「生成」すれば、「１」や「２」に変えられる

※ FireFox の場合、入れ替えるには、削除と生成を行う必要があります。
ブログ用に書き換えてるので、コード参照したい場合は、上のリンクから単体の html で参照した方がいいと思います。

なんかアホらしいほど簡単では・・・
一旦読み込んだ上で、コロコロとスクリプトを変えることもラクちん。なんの意味があるかは思いつかんケド。

　text プロパティへの代入時の注意点

試行錯誤の上 text に入れればいいと言うのは分かったんですが、その安定性に関してちょいと調べてみました。
内容的には、書き込まれる新規のスクリプトで innerHTML が 直ちに 書き出す状態だった場合でも問題ないか？です。

	e5.0	e5.5	e6.0	f1.0	f1.5	n6.2	n7.1	o8.53	o9.01	s2.3
hA	x/o	x/o	x/o	*/o	o/o	x/-	o/o	*/o	o/o	x/o
hB	x/o	x/o	x/o	x/o	o/o	x/-	o/o	*/o	o/o	x/o
hC	o/o	o/o	o/o	o/o	o/o	o/-	o/o	*/o	o/o	x/x
hD	o/o	o/o	o/o	o/o	o/o	o/-	o/o	*/o	o/o	x/o
DATA = typeA/typeB, o = OK, x = crush,- = NG, * = double

e = internetExplorer, f = fireFox, n = netscape, o = opera, s = sleipnir
o = 正常動作、x = クラッシュ、- = script 無効、* = script が２重で起動する。

ちなみに opera 7.02 は、text、src ともに無効です。

■ 要素への入れ込みのタイミング

各データの 左 / 右 は、appendChild と text プロパティへの代入の順序の違いです。

タイプＡ（左）

  ele = document.createElement('script');
  ele.type = "text/javascript";
  ele.text = [script];
  [object].appendChild(ele);

タイプＢ（右）

  ele = document.createElement('script');
  ele.type = "text/javascript";
  [object].appendChild(ele);
  ele.text = [script];

■ innerHTML との関連

また hA 〜 hD は、スクリプトを書き込む要素と、そのスクリプト内の innerHTML でなんらかのドキュメントを（直ちに）書き込む場合の書き込み先要素との関係の違いです。

便宜上
スクリプトを書き込む要素を <div id=s>
そのスクリプト内 innerHTML でのドキュメント書き込み先の要素を <div id=h>
とします

• hA　同一要素の場合。
  body にスクリプトを書き出しかつ、そのスクリプトから body に何か書こうとする場合など。
• hB　<div id=h><div id=s></div></div>の場合
• hC　<div id=s><div id=h></div></div>の場合
• hD
  <div id=s></div>
  <div id=h></div>
  の場合

■ 結果

調査範囲内ならタイプＢ＆ hd ならほぼ実害は無いと言って良いようで。

text プロパティへのスクリプトの書き出しは、生成されたオブジェクトを要素に追加した「後」の方（タイプＢ）が良いようです。ie その他でも安定です。これに反するのは netscape6.02 だけなのでクロスもラクかな。

あと hA〜hD では圧倒的に hD ですね。当然と言うか。

ということで、script を書き出す要素と、その script から直ちに innerHTML で何かを書き出す要素は入れ子にせず分ける必要があるということでしょうか。もっとも。調査するまでもなくかなり無茶な事してるとは思いますが、firefox 1.5 や opera 9（netscape7.1もか）はさすがと言うか、全く動じませんｗ

firefox1.5 は、個人的にはかなり信頼度が高いですね。安定してる。

他、マイナーブラウザということで Sleipnir を試したのですが自分の中では意外な結果です。やはり、Safari(Mac), Konqueror(Linux) なんて環境も試す必要性をバリバリ感じますねぇ。