如何使用jQuery动态添加外部脚本？

Question

I thought that I could just use jQuery's .append() and add them to the head, but that doesn't seem to be working for my external scripts (Knockout.js).

Here's my code that runs when the page loads. It seems to be working for the stylesheet, but not for the external scripts.

if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.8.0') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://code.jquery.com/jquery-1.8.0.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

function main() { 
        jQuery(document).ready(function($) {
            $("head").append("<script type='text/javascript' src='http://knockoutjs.com/js/jquery.tmpl.js'></script>");
            $("head").append("<script type='text/javascript' src='http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js'></script>");
            $("head").append("<link href='style.css' rel='stylesheet' type='text/css' />");

            // Then it appends the necessary HTML code [...]
        });
    }

Here's my test environment where you can see my current code in action with Firebug.

Here's what I'm seeing in Firebug after the page loads:

EDIT: It looks like it's having issues with the Knockout.js scripts in my code, so I'll look into those. Thank you for the comments and answer regarding dynamic scripts. I learned something :)

Answer 1

Have you tried jQuery.getScript() ? It basically loads a script from the server and then executes it.

 $.getScript("yourScript.js", function(){});

Answer 2

Try to add scripts this way, I have seen that issue before in some browsers.

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = script_url;
$("head").append( script ); 

Answer 3

According to this jQuery API pages comment here , this behavior is perfectly normal, as jQuery cleans up the DOM after you

Your code is executed (if URL is correct, and XSS is not blocked) whether you fetch it by $.append() ing it or use $.getScript() .

However, loading your site gives me at least three two solid errors. You might want to work on those.

The errors:

ReferenceError: $ is not defined
search.js
Line 54

and

TypeError: jQuery is undefined
http://knockoutjs.com/js/jquery.tmpl.js?_=1353351345859
Line 7

Answer 4

You should use something like AngularJS if your application is this complex. Otherwise you are reinventing the wheel.