Detect Jquery with regular javascript, if not present load it dynamcally

Question

I need the code to use regular javascript to detect whether or not JQuery is present, if not, load JQuery file from google or another website

UPDATE Two Working Solutions (just copying and pasting the working code here):

From Claudio Redi

window.jQuery || document.write("<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>\x3C/script>")

From Rob Darwin

var jQueryScriptOutputted = false;
function initJQuery() {
    if (typeof(jQuery) == 'undefined') {
        if (! jQueryScriptOutputted) {
            jQueryScriptOutputted = true;
            document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
        }
        setTimeout("initJQuery()", 50);
    }
}
initJQuery();

Check this answer man http://stackoverflow.com/questions/1828237/check-if-jquery-has-been-loaded-then-load-it-if-false — eric.itzhak, May 23 '12 at 21:28

Claudio Redi · Answer 1 · 2013-06-13T12:32:24.963

17

There are many ways, I like this most only because is the less verbose

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>  
<script>window.jQuery || 
    document.write("<script src='js/jquery-1.7.2.min.js'>\x3C/script>")
</script>

edited Jun 13 '13 at 12:32

answered May 23 '12 at 21:35

Claudio Redi

67,454
15
130
155

I didn't see your answer until later. Strange. Your code works. Thanks – Patriotec May 23 '12 at 21:50
ugh. I clicked downvote by accident -- should have been upvote, but now it's locked-in until question is edited. sorry about that, chief. – Michael Paulukonis Jun 13 '13 at 03:41
@Michael Paulukonis: no problem. Edited answer in case you're interested in reverting your vote. – Claudio Redi Jun 13 '13 at 12:33
the line `src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"` produces an error in Webkit which I corrected adding the protocol http. – Francisco Quintero Dec 03 '13 at 14:33
1

@Francisco `//` is dynamic protocol, that means it will adopt whatever protocol is currently in use – zanderwar Oct 29 '16 at 04:37

Alnitak · Answer 2 · 2015-11-28T11:31:15.330

11

The nice way to load jQuery without using document.write is:

if (window.jQuery === undefined) {
    var s = document.createElement('script');
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js";
    document.head.appendChild(s);
}

This will cause an asynchronous load, though - so you may want to include a .onload handler to allow execution to wait until the load has finished.

edited Nov 28 '15 at 11:31

answered May 23 '12 at 22:05

Alnitak

334,560
70
407
495

onload doesn't seem to work always: http://stackoverflow.com/questions/3248384/document-createelementscript-synchronously – Marius Jan 17 '17 at 06:47

Rob Darwin · Accepted Answer · 2012-05-23T22:27:21.377

Something like this should work.

EDIT: Code added from above link.

var jQueryScriptOutputted = false;
function initJQuery() {

    //if the jQuery object isn't available
    if (typeof(jQuery) == 'undefined') {


        if (! jQueryScriptOutputted) {
            //only output the script once..
            jQueryScriptOutputted = true;

            //output the script (load it from google api)
            document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></scr" + "ipt>");
        }
        setTimeout("initJQuery()", 50);
    } else {

        $(function() {  
            //do anything that needs to be done on document.ready
        });
    }

}
initJQuery();

Thanks. Worked out well. I added the working code into my question. — Patriotec, May 23 '12 at 21:43

Detect Jquery with regular javascript, if not present load it dynamcally

3 Answers3