动态加载css样式表和javascript脚本

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 comment from Björn Graf, I tried using onload event to test if the new script is included using Firefox. It worked!

The code

What 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().

var css;
function include_css(css_file) {
    var html_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\');
    }
    return false;
}
var js;
function include_js(file) {
    var html_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\');
    }
    return false;
}

Results

As you can probably guess, the results are different in IE and FF.

• CSS inclusion - IE fires both events, onload first, then onreadystatechange. FF fires nothing.
• JS inclusion - IE fires onreadystatechange. FF fires onload. Both will execute the script before firing the event.

Conclusion

1. So there is, after all, a cross-browser way to tell when a JavaScript is actually included and that is to attach two event listeners - onload and onreadystatechange.
2. In IE you have two ways to tell when a CSS is included.