Include jQuery from .js file if it is not present

Question

I am creating a library and I want to include jQuery to a user's HTML file if it wasn't included it.

There were some suggestions to do it in the link below:

However, I don't know why it is not working.

Here are the HTML and .js codes:

 document.head.innerHTML += "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>";

<!DOCTYPE html>
    <html>
        <head>
            <script src="mydebugger.js"></script>
        </head>
        <body>
            <div></div>
            <script>
                $("div").html("Hi");
                console.log(document);
            </script>
        </body>
    </html>

You can see via the console that the <script> is added to <head> but it just won't work.

Please consider, I can only add jQuery from the .js file and I cannot add it directly into the HTML file.

Possible duplicate of [Include jQuery, if not included already](https://stackoverflow.com/questions/10371211/include-jquery-if-not-included-already) — imvain2, Jun 11 '19 at 21:57
Why dont you just include the JQuery in `` tag instead adding it via JS — Anand G, Jun 11 '19 at 21:59
I only can write .js file so there is not any (HTML file will be written by the user of the library) — Me.a, Jun 11 '19 at 22:07
as I mentioned above methods are not working currently, how that might be duplicate? — Me.a, Jun 11 '19 at 22:13

score 3 · Accepted Answer · edited Jan 27 '23 at 17:09

Here is a solution that I think will work well for you:

// This will check if jQuery has loaded. If not, it will add to <head>
window.onload = function() {
  if (!window.jQuery) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://code.jquery.com/jquery-latest.min.js';
    head.appendChild(script);
  }
}

// This will wait until Jquery is loaded then fire your logic
defer(function () {
  $("div").html("Hi");
  console.log(document);
});


function defer(method) {
  if (window.jQuery) {
    method();
  } else {
    setTimeout(function() { defer(method) }, 50);
  }
}

<!DOCTYPE html>
<html>
  <head>
    <script src="mydebugger.js"></script>
  </head>
  <body>
    <div></div>
  </body>
</html>

you are right, I have to write jquery part in my library (.js file), not in HTML file, sorry for this stupid question and thanks for your time :) — Me.a, Jun 11 '19 at 22:51

uke5tar · Answer 2 · 2019-06-18T20:27:28.457

If you can't set in in the head element you can append it via Javascript. Afterwards you will need to make an interval to wait for jQuery to be loaded and defined before you can use it.

This would work:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div></div>
        <script>
        if(!window.jQuery) {
          (function appendJQueryToHead() {
            var script = document.createElement("script");
             script.type = "text/javascript";
             script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
             document.head.appendChild(script);
          })();
        }

        var waitForJQuery = setInterval(function() {
            if(window.jQuery) {
                clearInterval(waitForJQuery);
                init();
            }
        }, 100);

        function init() {
            $("div").html("Hi");
            console.log(document);
        }
        </script>
    </body>
</html>

Include jQuery from .js file if it is not present

2 Answers2