JavaScript内にJavaScriptを読み込む方法

締切済

質問者：yexob328
質問日時：2008/02/21 01:55
回答数：5件

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が実行され、
「オブジェクトを指定してください」のエラーが表示されてしまいます。

よい方法がありましたら教えていただけますでしょうか？
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： ai10
回答日時：2008/02/21 12:52

どうやら…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;
//-----------------------------------------------------------------------------

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
無事、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>タグを書き出しを行っていました。
もう少し教えていただいた方法を参考にやり方を考えてみようと思います。
バナーを表示させられただけでも、かなり前進しました。
ありがとうございました。

通報する

お礼日時：2008/02/22 00:55

No.4

回答者： arexis
回答日時：2008/02/21 09:46

正攻法が駄目ならベタで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;

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
setIntervalを使用して無事Function01を実行することができました。

なのですが、ページにFunction01で表示させているバナーしか表示されません。
実行時間を長くして確認してみたところ、Functon01が実行されるまで表示されていたページが、Functon01実行時に上書き（？）されてしまっているようでした。

通報する

お礼日時：2008/02/22 01:05

No.3

回答者： ai10
回答日時：2008/02/21 08:33

あ、ごめんなさい。

変な文字が入った。

_text = '';
_text += 'var url01 = "http://www...jp/";';
_text += 'var url02 = "http://www...jp/";';

- 0
- 件

通報する

No.2

回答者： ai10
回答日時：2008/02/21 08:30

まずは、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>
とする必要があると思います。

これを追加したらＩＥ７で動くようになりました。
が、ｆｉｒｅｆｏｘで２回実行される現象はなおらず。
このへんはよくわからない。
一度ＩＥ６で確認をとってみてください。

- 0
- 件

通報する

No.1

回答者： ai10
回答日時：2008/02/21 03:20

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 がどこかのサーバー上にあるファイルならなおさらわからない。

一度実行してみてください。