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.)

The script is still loading when you try to call noConflict as Wolff alludes to. — Travis J, Apr 08 '14 at 17:27
just don't. If the other other site doesn't include something your code depends on, it's perfectly valid for your code to not work. Just make sure that you correctly document the dependencies. — Kevin B, Apr 08 '14 at 17:36
I know this is an old question but I think Kevin is right - why are you giving yourself the headache of trying to prevent conflicts and doing `onload()`/`.done()` functions when you can just list the dependencies and have your API throw an error if they don't exist? — Edward, Nov 20 '15 at 14:59

jfriend00 · Accepted Answer · 2014-04-08T17:45:53.080

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
});

Thank you for explaining the issue and proposing a solution. I was able to take the code you provided and modify it to fit my situation, and it is working great! — MattD, Apr 08 '14 at 21:05

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

1 Answers1