动态加载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.