如何在JavaScript中的特定行上动态加载文件？

Question

I created this script for a core.js file for my client's website and I want to dynamically load a few javascript libraries from that core.js file. However, javascript libraries require that you load that library first , then use the rest of your script, because you have to define your libraries object before calling it, doh. So I have this very simple script to dynamically load a file, but I want to know if there's a method to make sure that it loads it in priority ahead of the core.js file. Here's the current script:

(function() {
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", "http://modernizr.com/downloads/modernizr-latest.js");
    if(typeof script != "undefined") {
        document.getElementsByTagName("head")[0].appendChild( script );
    }
})();

And in the debugger, you see:

Of course, it's going to load the dynamic file ahead of the core file, but I was wondering if there was a way to specify the line on the document for which to load the modernizr file? Otherwise, I can't use Modernizr, even though I have loaded it.

Obviously, I can't use jQuery, because I want to load that, too.

Answer 1

You can respond to the loading of a dynamically-loaded JavaScript resource (or any resource, for that matter -- image, iframe, video, etc.) with a load event listener. The easiest way to do it here would be:

(function() {
    var script = document.createElement("script");
    ...
    script.onload = function() {
        // this will run later, when the script loads
        // in this function you can safely use Modernizr
    }
})();