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
– Travis J, Commented Apr 8, 2014 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. — user400654
– user400654, Commented Apr 8, 2014 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
– Edward, Commented Nov 20, 2015 at 14:59

jfriend00 · Accepted Answer · 2014-04-08 17:45:53Z

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!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related