How to include jQuery in remote Javascript file only if site doesn't have jQuery?

Question

I have a script (embed.js) that is being included from other websites/domains. Ex:

<script type="text/javascript" src="//mydomain.com/embed.js"></script>

The code in this script relies on jQuery, but obviously not every website uses jQuery. So, I put this code in the embed.js script at the top:

if (typeof jQuery == 'undefined') {
    var jq = document.createElement('script');
    jq.type = 'text/javascript';
    jq.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(jq);
    jQuery.noConflict();
}

But, I get an error about "jQuery" not being defined for the noConflict() line. It is indeed adding the jQuery tag/code to the page, but for some reason after that appendChild() line, the following noConflict() line doesn't recognize jQuery.

How do I only include jQuery on a page if it's not already on it, through a remote Javascript file, and then in that same Javascript file use that jQuery I just included? (This all needs to be through one file.)

Answer 1

You are getting the error because the method you're using for loading jQuery loads it asynchronously, thus jQuery is not yet loaded when you try to execute the .noConflict() line.

You would have similar problems if your code is also trying to use jQuery as it initializes (if your code isn't also loading asynchronously).

If you need to load jQuery synchronously (simpler solution, but probably not preferred), then you can use document.write() to actually write the script tag that would load it and the browser will process that synchronously.

You can also load jQuery in a way that will notify you when it is actually loaded at which time you can run the .noConflict() line and then call your own initialization code that uses jQuery. This is probably the most self-contained mechanism and avoids document.write() which can slow down the loading process some in modern browsers (use of document.write() in some circumstances prevents some loading optimizations).

For example, you could load jQuery with this function and then it would call your callback when it was loaded successfully:

function loadScript(sScriptSrc, oCallback) {
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sScriptSrc;
    // most browsers
    oScript.onload = oCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            oCallback();
        }
    }
    oHead.appendChild(oScript);
}

loadScript("jquery.js", function() {
    jQuery.noConflict();
    // call your own initialization function that uses jQuery here
});