Why call $.getScript instead of using the <script> tag directly?

Question

I don't understand the reason for replacing this:

<script src="js/example.js"></script>

with this:

$.getScript('js/example.js', function() {
  alert('Load was performed.');
});

Is there a particular reason to use the jQuery version?

Flitch

Answer 1

The only reason I can think of is that you get the callback when the script is loaded. But you can get that callback using a script tag, too, by using the load event (or on really old IE, onreadystatechange).

In contrast, there are several negatives to doing it this way, not least that getScript is subject to the Same Origin Policy, whereas a script tag is not.

Even if you need to load a script dynamically (and there are several reasons you might need to do that), frankly unless you really need the callback, I'd say you're better off just loading the script by adding a script tag:

$('head:first').append("<script type='text/javascript' src='js/examplejs'><\/script>");

(Note: You need the otherwise-unnecessary \ in the ending tag in the above to avoid prematurely ending the script tag this code exists within, if it's in an inline script tag.)

script tags added in this way are not subject to the Same Origin Policy. If you want the load callback, then:

$("<script type='text/javascript' src='js/examplejs'><\/script>")
    .on("load", function() {
        // loaded
    })
    .appendTo('head:first');

(As I said, for really old IE, you'd have to do more than that, but you shouldn't need to deal with them these days.)

Pisarik

Answer 2

I can think of three reasons you might use the jQuery form:

1. You want all of your script declarations at the top of your document, but you also know that placing script declarations there forces the browser to download them in their entirety before proceeding further in the page rendering process. This can introduce measurable delay. The jQuery form will schedule the script loads until after the document is finished downloading, similar to the effect of placing all of your <script> tags at the end of the document, only without the syntactic weirdness.
2. The <script> mechanism is not available to scripts that do not live in the HTML document itself; that is, if a script included on the page with <script> wants to load a script, it has no option but to use a JavaScript-based approach, such as calling the jQuery function.
3. The jQuery form allows notification of the script's successful execution, in the form of a supplied callback function.

Heterotrophic

Good answer, although both #1 and #2 are arguments for dynamically loading scripts, not getScript specifically, which is (as I noted) subject to restrictions that script tags are not. – Pisarik

@T.J.: Noted. I am not advocating $.getScript() over any other particular script-based approach, only pointing out why one might use it instead of <script>. +1 to your answer for pointing out the same-origin policy difference. – Heterotrophic

Since jQuery 1.2 you can use $.getScript to dynamically load cross-domain scripts. Source: blog.jquery.com/2007/09/10/jquery-1-2-released – Armour

Answer 3

No need to do that..

You do that if you want to load the script dynamically (when needed, and not from the beginning)

Rhinal

Answer 4

The script might depend on jQuery, so it would be a way to prevent the browser trying to load it if it hasn't loaded jQuery.

There are a number of reasons that jQuery might not load, from a simple network failure to a CDN not being whitelisted by a NoScript user.

Subpoena

Answer 5

maybe to control when a script is loaded? On a javascript heavy page, it may be worth waiting to load some things that are non essential until after essential things are loaded.

Belting