- 締切済み
JavaScript内にJavaScriptを読み込む方法
HTML内に <script type=\"text/javascript\" src=\"main.js\"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = \'<script language=\"JavaScript\">\'; html += \'var url0101 = \"url01.xxx.jp\";\'; html += \'var url02 = \"url02.oooo.jp\";\'; html += \'</script>\'; html += \'<script language=\"JavaScript\" src=\"http://xxx.xxxx.xxx/test.js\"></script>\'); html += \'<script language=\"JavaScript\">\'; html += \'Function01(\"check\")\'; html += \'</script>\'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか？ よろしくお願いします。
- yexob328
- お礼率50% (4/8)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ai10
- ベストアンサー率27% (3/11)
どうやら…head要素に追加するタイミングに問題があったみたいで、 script要素をhead要素に追加してから script内容を記述するのはダメなようで… 先にscript内容を記述してから head要素に追加するのがいいみたい。 さらに、safari では実行できなかったので #4みたいにFunction01が実行できるまで待つか ページロード時に実行するしかない。ページロード時に実行することはあなたの意図とは少し違ってくるかもしれないし、あと、ページロード時で大丈夫なのか…？という思いがあったがなんだか動いてるみたいｗ。 //----------------------------------------------------------------------------- var _head, _script, _text; _head = document.getElementsByTagName( 'head' )[0]; // **** script 1 **** _script = document.createElement( 'script' ); _script.type = 'text/javascript'; _text = ''; _text += 'var url01 = "http://www...jp/";'; _text += 'var url02 = "http://www...jp/";'; _script.text = _text; _head.appendChild( _script ); // **** script 2 **** _script = document.createElement( 'script' ); _script.type = 'text/javascript'; _script.src = 'test.js'; _head.appendChild( _script ); // **** script 3 **** _script = document.createElement( 'script' ); _script.type = 'text/javascript'; _script.text = 'window./*@cc_on @if (@_jscript) attachEvent( "on"+ @else@*/ addEventListener( /*@end@*/ "load", function () { Function01("check"); }, false );'; _head.appendChild( _script ); // **** destroy **** _head = _script = _text = null; //-----------------------------------------------------------------------------
- arexis
- ベストアンサー率66% (66/99)
正攻法が駄目ならベタでw html = '<script language="JavaScript">'; html += 'var url0101 = "url01.xxx.jp";'; html += 'var url02 = "url02.oooo.jp";'; html += '</script>'; html += '<script language="JavaScript" src="test.js"></script>'; html += '<script language="JavaScript">'; html += 'var Tid20080221 = setInterval( function(){ if(self.Function01){ clearInterval(Tid20080221); Function01("check")} } ,50);'; html += '</script>'; document.write(html); **************** document.write()を使う必要が無いなら #1さんのを使って var _head, _script, _text; _head = document.getElementsByTagName( 'head' )[0]; // **** script 1 **** _script = _head.appendChild( document.createElement( 'script' ) ); _script.type = 'text/javascript'; _text = ''; _text += 'var url01 = "http://www...jp/";'; _text += 'var url02 = "http://www...jp/";'; _text = 'var Tid20080221 = setInterval( function(){ if(self.Function01){ clearInterval(Tid20080221); Tid20080221=null; Function01("check")} } ,50);'; _script.text = _text; _script = _head.appendChild( document.createElement( 'script' ) ); _script.type = 'text/javascript'; _script.src = 'test.js'; // **** destroy **** _head = _script = _text = null;
お礼
ご回答ありがとうございました。 setIntervalを使用して無事Function01を実行することができました。 なのですが、ページにFunction01で表示させているバナーしか表示されません。 実行時間を長くして確認してみたところ、Functon01が実行されるまで表示されていたページが、Functon01実行時に上書き（？）されてしまっているようでした。
- ai10
- ベストアンサー率27% (3/11)
あ、ごめんなさい。 変な文字が入った。 _text = ''; _text += 'var url01 = "http://www...jp/";'; _text += 'var url02 = "http://www...jp/";';
- ai10
- ベストアンサー率27% (3/11)
まずは、script 1の部分で修正。 var宣言されていなかった。 // **** script 1 **** _script = _head.appendChild( document.createElement( 'script' ) ); _script.type = 'text/javascript'; _text = ''; _text += 'var url01 = "http://www...jp/";'; _text += 'var url02 = "http://www...jp/";'; _script.text = _text; そして、こちらでもためしたところＩＥ７では動かず、 (ｆｉｒｅｆｏｘではなぜかFunction01が２回実行されている模様。 これはなぜかはわかりません。) そこで、main.js じゃなく main.js を導入する側で <script type="text/javascript" src="main.js"></script> を次のように defer 属性を追加してください。 <script defer type="text/javascript" src="main.js"></script> xhtmlなら <script defer='defer' type="text/javascript" src="main.js"></script> とする必要があると思います。 これを追加したらＩＥ７で動くようになりました。 が、ｆｉｒｅｆｏｘで２回実行される現象はなおらず。 このへんはよくわからない。 一度ＩＥ６で確認をとってみてください。
- ai10
- ベストアンサー率27% (3/11)
document.write は少し微妙かも ----------------------------------------------------------------------------- var _head, _script, _text; _head = document.getElementsByTagName( 'head' )[0]; // **** script 1 **** _script = _head.appendChild( document.createElement( 'script' ) ); _script.type = 'text/javascript'; _text = ''; _text += 'url01 = "http://www...jp/";'; _text += 'url02 = "http://www...jp/";'; _script.text = _text; // **** script 2 **** _script = _head.appendChild( document.createElement( 'script' ) ); _script.type = 'text/javascript'; _script.src = 'http://www.../test.js'; // **** script 3 **** _script = _head.appendChild( document.createElement( 'script' ) ); _script.type = 'text/javascript'; _script.text = 'Function01("check");'; // **** destroy **** _head = _script = _text = null; ----------------------------------------------------------------------------- ただし、これがIEであなたの予想通り動くかどうかはわからない。 とくに、script 2 の test.js がどこかのサーバー上にあるファイルならなおさらわからない。 一度実行してみてください。
お礼
ご回答ありがとうございます。 実行してみましたが、やはりFunction01の部分でエラーになってしまっているようでした。
お礼
ご回答ありがとうございました。 無事、Function01を実行してバナーを表示させることができました。 なのですが、 <script type="text/javascript" src="test.js">をhead要素に追加しているはずが、 追加ではなく、上書きされているような挙動になってしまい、ページ内に書かれたhtmlが表示されなくなってしまいました。 大変申し訳ないのですが、説明が足りなかったので補足すると、 大量にある既存のページにできるだけシンプルな方法でバナーのついたヘッダーを挿入したいと思っています。 (↓呼び出し元のhtml) 1 <html> 2 <head> 3 <sctipt type="text/javascript"> 4 var url01 = "http://www...jp/"; 5 var url02 = "http://www...jp/"; 6 </script> 7 <script type="text/javascript" src="test.js"></script> 8 </head> 9 <body> 10 <script type="text/javascript" src="main.js"></script> ・ ・ main.jsでは、cssのロード、<table>タグを書き出しを行っていました。 もう少し教えていただいた方法を参考にやり方を考えてみようと思います。 バナーを表示させられただけでも、かなり前進しました。 ありがとうございました。