AjaxのリクエストファイルでJavascriptを読み込む際の注意

Javascript

どうやら、ajaxでファイルを呼び出す際、呼び出されるファイル内でjavascriptファイルを読み込んでいると、
読み込まれるはずのjavascriptが認識されていないようだ。
しかも、IEでのみ。Firefox上では予想通りの動作をしてくれた。
こんなところでもクロスブラウザか〜・・・と思いながら考えてみた。


※prototype.jsのAjax.Updater()で再現してみた。


再現させた時のコードと、回避策をメモしておこう。

ajax呼び出し元のファイル(ajaxtest.html)
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
<title>ajaxtest</title>
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript">
getResponse = function()
{
    new Ajax.Updater('into_here',
                  './ajaxresponse.html',
                  {
                      evalScripts:true,
                      method:'get',
                      onComplete:insertResponse
                  });
}

insertResponse = function(req)
{
    alert(req.responseText);
}
</script>
</head>
<body>
<h2>ajaxtest</h2>
<a href="#" onclick="getResponse(); return false;">呼び出し</a>
<br><br>
Response into belong div Element<br>
<div id="into_here">ここにレスポンスが入る</div>
</body>
</html>
レスポンスファイル(ajaxresponse.html)
<script type="text/javascript" src="request.js"></script>
<a href="#" onclick="fnc(); return false;">レスポンス内容</a>
呼び出し先が読み込むjavascriptファイル(request.js)
fnc = function()
{
    alert("test");
}


これだとAjax.Updater()のオプションでevalScriptsをtrueにしていても読み込まれない。
（このくらいのファイルなら直接scriptタグの中に書けよ、というツッコミはおいといて・・・）


なので、結果こういう回避の仕方をした。

レスポンスファイル(ajaxresponse.html)
<script type="text/javascript">
var scriptTag = document.createElement("script");
scriptTag.type="text.javascript";
scriptTag.src="request.js";

document.getElementsByTagName("head")[0].appendChild(scriptTag);
</script>
<a href="#" onclick="fnc(); return false;">レスポンス内容</a>


これで、呼び出し元ファイルのheadにscriptタグを追加して新しいjavascriptファイルを読み込ませる
という方法をになる。


コレならIEでもうまく動作してくれる♪


う〜ん・・・ややっこしいったらないですね。


jqueryだったら再現するのかどうかもチェックしておく必要がありますね・・・