実行せずにダウンロードするスクリプトごとに、名前とURLを含むオブジェクトを作成し、それらのオブジェクトを配列に配置します。
配列をループし、withを使用jQuery.ajaxしdataType: "text"てスクリプトをテキストとしてダウンロードします。ajax呼び出しのdoneハンドラーで、ファイルのテキストコンテンツ（最初の引数で渡される）を適切なオブジェクトに格納し、カウンターをインクリメントし、そのカウンターがファイルの数と等しい場合に「alldone」関数を呼び出します。この方法でダウンロードしています。
「alldone」関数（またはそれ以降）で、次の手順を実行します。配列を再度ループし、エントリごとに、、を使用して、document.createElement("script")「src」属性ではなく、目的のソースをインラインで持つスクリプトを動的に生成します。最後に、doを実行します。これは、そのスクリプトが実行されるポイントです。document.createTextNode(...)(...scriptNode...).appendChild(...)document.head.appendChild(...scriptNode...)
私は、フレームを使用する必要があるプロジェクトでこの手法を使用しました。これらのファイルのそれぞれがサーバーから1回だけ要求されるようにするために、複数のフレームやフレームセットに同一のJavaScriptファイルが必要です。
コード（テスト済みで動作中）は次のとおりです
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script id="scriptData">
var scriptData = [
{ name: "foo" , url: "path/to/foo" },
{ name: "bar" , url: "path/to/bar" }
];
</script>
<script id="scriptLoader">
var LOADER = {
loadedCount: 0,
toBeLoadedCount: 0,
load_jQuery: function (){
var jqNode = document.createElement("script");
jqNode.setAttribute("src", "/path/to/jquery");
jqNode.setAttribute("onload", "LOADER.loadScripts();");
jqNode.setAttribute("id", "jquery");
document.head.appendChild(jqNode);
},
loadScripts: function (){
var scriptDataLookup = this.scriptDataLookup = {};
var scriptNodes = this.scriptNodes = {};
var scriptNodesArr = this.scriptNodesArr = [];
for (var j=0; j<scriptData.length; j++){
var theEntry = scriptData[j];
scriptDataLookup[theEntry.name] = theEntry;
}
//console.log(JSON.stringify(scriptDataLookup, null, 4));
for (var i=0; i<scriptData.length; i++){
var entry = scriptData[i];
var name = entry.name;
var theURL = entry.url;
this.toBeLoadedCount++;
var node = document.createElement("script");
node.setAttribute("id", name);
scriptNodes[name] = node;
scriptNodesArr.push(node);
jQuery.ajax({
method : "GET",
url : theURL,
dataType : "text"
}).done(this.makeHandler(name, node)).fail(this.makeFailHandler(name, node));
}
},
makeFailHandler: function(name, node){
var THIS = this;
return function(xhr, errorName, errorMessage){
console.log(name, "FAIL");
console.log(xhr);
console.log(errorName);
console.log(errorMessage);
debugger;
}
},
makeHandler: function(name, node){
var THIS = this;
return function (fileContents, status, xhr){
THIS.loadedCount++;
//console.log("loaded", name, "content length", fileContents.length, "status", status);
//console.log("loaded:", THIS.loadedCount, "/", THIS.toBeLoadedCount);
THIS.scriptDataLookup[name].fileContents = fileContents;
if (THIS.loadedCount >= THIS.toBeLoadedCount){
THIS.allScriptsLoaded();
}
}
},
allScriptsLoaded: function(){
for (var i=0; i<this.scriptNodesArr.length; i++){
var scriptNode = this.scriptNodesArr[i];
var name = scriptNode.id;
var data = this.scriptDataLookup[name];
var fileContents = data.fileContents;
var textNode = document.createTextNode(fileContents);
scriptNode.appendChild(textNode);
document.head.appendChild(scriptNode); // execution is here
//console.log(scriptNode);
}
// call code to make the frames here
}
};
</script>
</head>
<frameset rows="200pixels,*" onload="LOADER.load_jQuery();">
<frame src="about:blank"></frame>
<frame src="about:blank"></frame>
</frameset>
</html>
上記のアプローチに密接に関連する
他の質問他の関連する質問