The problem in question is how to find out a dynamically included JavaScript file is actually loaded. The concept of JavaScript includes is here, the IE-only solution is here. The IE solution is to use the onreadystatechange event that is fired when a new script is included. It also works for dynamically loaded CSS files using a new link DOM element. Thanks to the from Björn Graf, I tried using onload event to test if the new script is included using Firefox. It worked!
The codeWhat we have here (demo) is trying to include a .js file and an .css file, creating new script and link DOM elements. Then I\'m attaching event listeners to those new elements - one onload and one onreadystatechange. The script that is included (jsalert.js) has one alert().
varcss; functioninclude_css(css_file){ varhtml_doc = document.getElementsByTagName(\'head\')[0]; css = document.createElement(\'link\'); css.setAttribute(\'rel\', \'stylesheet\'); css.setAttribute(\'type\', \'text/css\'); css.setAttribute(\'href\', css_file); html_doc.appendChild(css); // alert state change css.onreadystatechange = function(){ if(css.readyState == \'complete\'){ alert(\'CSS onreadystatechange fired\'); } } css.onload = function(){ alert(\'CSS onload fired\'); } returnfalse; }varjs; functioninclude_js(file){ varhtml_doc = document.getElementsByTagName(\'head\')[0]; js = document.createElement(\'script\'); js.setAttribute(\'type\', \'text/javascript\'); js.setAttribute(\'src\', file); html_doc.appendChild(js); js.onreadystatechange = function(){ if(js.readyState == \'complete\'){ alert(\'JS onreadystate fired\'); } } js.onload = function(){ alert(\'JS onload fired\'); } returnfalse; }