So I needed a cross-browser way to check if a particular JS file had already been loaded, and if not load it and then run some commands once it had been parsed. From the various bits and pieces on this page and comments I concocted this thing of beauty:

//first of all the bit to find if a js file is already loaded
var filename = “my_file.js”;
var scpt = document.getElementsByTagName(\’script\’);
var jsfound=false;
for(x=0;x<scpt.length;x++){
if(scpt[x].src!=”” && scpt[x].src.indexOf(filename)!=-1){
jsfound=true;
break;
}
}

if(jsfound==false){
//prc is a string of commands that will be eval’d and run once the script has loaded and parsed
prc = “alert(’success’);”;
//here is our dynamic inclusion function
jsInclude(filename,prc);
}else{
//do whatever you would normally do if the script is already present
}

And then the function itself:

function jsInclude(filename,process_eval){
var oRequest = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try { oRequest = new XMLHttpRequest(); }
catch(e) {oRequest = false;}
// branch for IE/Windows ActiveX version
}else if(window.ActiveXObject) {
try { oRequest = new ActiveXObject(”Msxml2.XMLHTTP”); }
catch(e) {
try {oRequest = new ActiveXObject(”Microsoft.XMLHTTP”);}
catch(e) {oRequest = false;}
}
}
if(!oRequest){alert(”Ajax fail, unsupported browser!”);return false;}
oRequest.open(”GET”, filename, true);

oRequest.onreadystatechange = function () {
if (oRequest.readyState == 4) {
var headID = document.getElementsByTagName(”head”)[0];
var newScript = document.createElement(”script”);
newScript.type = “text/javascript”;
if(typeof(newScript.onreadystatechange)==”undefined”){
//firefox,chrome,safari
newScript.onload=function(){window.eval(process_eval);}
newScript.src = filename;
}else{
//IE
newScript.onreadystatechange=function(){if(newScript.readyState==”complete” || newScript.readyState==”loaded”){eval(process_eval);}}
newScript.text = oRequest.responseText;
if (!document.all) {
newScript.innerHTML = oRequest.responseText;
}
}
headID.appendChild(newScript);
}
}
oRequest.send(null);
return true;
}

It is a wee bit messy and kludgy alright, but it works in IE6,7,8, FF, Safari and Chrome as far as I can tell

//first of all the bit to find if a js file is already loaded
var scpt = document.getElementsByTagName(\’script\’);
var jsfound=false;
for(x=0;x<scpt.length;x++){
if(scpt[x].src!=”" && scpt[x].src.indexOf(“yahoo-dom-event-conn-element-treeview”)!=-1){
jsfound=true;
break;
}
}

if(jsfound==false){
//prc is a string of commands that will be eval’d and run once the script has loaded and parsed
prc = “alert(‘success’);”;
//here is our dynamic inclusion function
jsInclude(“js_file.js”,prc);
}else{
//do whatever you would normally do if the script is already present
}

And then the function itself:

function jsInclude(filename,process_eval){
var oRequest = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try { oRequest = new XMLHttpRequest(); }
catch(e) {oRequest = false;}
// branch for IE/Windows ActiveX version
}else if(window.ActiveXObject) {
try { oRequest = new ActiveXObject(“Msxml2.XMLHTTP”); }
catch(e) {
try {oRequest = new ActiveXObject(“Microsoft.XMLHTTP”);}
catch(e) {oRequest = false;}
}
}
if(!oRequest){alert(“Ajax fail, unsupported browser!”);return false;}
oRequest.open(“GET”, filename, true);

oRequest.onreadystatechange = function () {
if (oRequest.readyState == 4) {
var headID = document.getElementsByTagName(“head”)[0];
var newScript = document.createElement(“script”);
newScript.type = “text/javascript”;
if(typeof(newScript.onreadystatechange)==”undefined”){
//firefox,chrome,safari
newScript.onload=function(){window.eval(process_eval);}
newScript.src = “‘ . CRB_WWW_LIB . ‘yahoo-dom-event-conn-element-treeview.js”;
}else{
//IE
newScript.onreadystatechange=function(){if(newScript.readyState==”complete” || newScript.readyState==”loaded”){eval(process_eval);}}
newScript.text = oRequest.responseText;
if (!document.all) {
newScript.innerHTML = oRequest.responseText;
}
}
headID.appendChild(newScript);
}
}
oRequest.send(null);
return true;
}

It is a wee bit messy and kludgy alright, but it works in IE6,7,8, FF, Safari and Chrome as far as I can tell

I am surprised you haven’t encountered that readyState fires “loaded” state only, “completed” state only and sometimes both. This means that your callback may execute twice.

Try to put alert as a callback and refresh the page 20-30 times. You will see the exceptions

Another unwanted behavior is if you have functionality that depends on the file that needs to be loaded. In that case it is impossible to create consistent solution packed as a library.

The only way is to put some markers in the end of the files that you want to load. Once the file is loaded the marker functions will execute.

This is the only way I found by testing that works cross browser. Drawbacks are that you need to control the content of the files you want to load.

Very bad that this buggy behavior is in IE6,7,8. What were these people thinking??

Anyway good luck with your efforts guys.

I m loading the multiple scripts when one tab is active. now script are loading for this active tab and user switched to another tab..so on active tab changed other javascritp for this current tab are also loaded dynamically..but on readystate=’loaded’ || readystate==’completed’ i try to call the function of loaded script. but i m getting the undefined error and i found that thought i m getting the readystate = ‘loaded’ or ‘complete’ my javascript is not loaded..is there any issue with IE 6 loading the scritp…this happend only when my previous requested script are not loaded and i request another script…but how it is possible to complere the request which was made later….

http://www.doktortr.net