How to include jQuery dynamically in any website using pure javascript

I am trying to include jquery dynamically and i have used the following code-

index.php

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="includejquery.js"></script>
</head>
<body>
<div id="testing"></div>

<script type="text/javascript">
    $(document).ready(function(){
        $('#testing').html('<p>This is a paragraph!</p>');
    });
</script>
</body>
</html>

includejquery.js

if(!window.jQuery)
{
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.async = true;
    script.src = ".1.1.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
    jQuery.noConflict();
}

But jquery functionality is not working it is not printing the paragraph tag :-( Please help me out. Thanks in advance

I am trying to include jquery dynamically and i have used the following code-

index.php

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="includejquery.js"></script>
</head>
<body>
<div id="testing"></div>

<script type="text/javascript">
    $(document).ready(function(){
        $('#testing').html('<p>This is a paragraph!</p>');
    });
</script>
</body>
</html>

includejquery.js

if(!window.jQuery)
{
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.async = true;
    script.src = "http://code.jquery.com/jquery-2.1.1.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
    jQuery.noConflict();
}

But jquery functionality is not working it is not printing the paragraph tag :-( Please help me out. Thanks in advance

Share Improve this question asked Aug 22, 2014 at 8:13 user3049006

Add a comment |

9 Answers 9

Sorted by: Reset to default 6

That's not working because your $(document).ready(... line runs before jQuery loads, and so it fails because either $ is undefined (throwing a ReferenceError) or it refers to something other than jQuery. Also, you're calling jQuery.noConflict() before jQuery is loaded, and if that call did work, it would mean that $ no longer referred to jQuery at all, so $(document).ready(... still wouldn't work.

In any modern browser, you can use the load event on the script element you're adding, which tells you that the script has been loaded. Probably best to pass a callback into a call you make to includejquery.js, like this:

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="includejquery.js"></script>
</head>
<body>
<div id="testing"></div>

<script type="text/javascript">
    includejQuery(function($){
        $('#testing').html('<p>This is a paragraph!</p>');
    });
</script>
</body>
</html>

includejquery.js:

function includejQuery(callback) {
    if(window.jQuery)
    {
        // jQuery is already loaded, set up an asynchronous call
        // to the callback if any
        if (callback)
        {
            setTimeout(function() {
                callback(jQuery);
            }, 0);
        }
    }
    else
    {
        // jQuery not loaded, load it and when it loads call
        // noConflict and the callback (if any).
        var script = document.createElement('script');
        script.onload = function() {
            jQuery.noConflict();
            if (callback) {
                callback(jQuery);
            }
        };
        script.src = "http://code.jquery.com/jquery-2.1.1.min.js";
        document.getElementsByTagName('head')[0].appendChild(script);
    }
}

Changes there:

In includejquery.js, just define a function and wait to be called.
Have that function accept a callback.
Have it wait for the script to load.
When the script is loaded, call jQuery.noConflict and then, if there's a callback, call it and pass in the jQuery function.
In the HTML, I'm calling the function, and receiving the argument it passes me as $, so within that function only, $ === jQuery even though outside it, it doesn't (because of noConflict).

What's wrong with the implementation from the HTML5-Boilerplate?

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery_2.1.1.min.js"><\/script>')</script>

Alternative solution

(function () {

        initScript().then(function (v) {
            console.info(v);
            var script = document.getElementById("__jquery");
            script.onload = function () {
                $(document).ready(function () {
                    // Main logic goes here.
                    $("body").css("background-color","gray");
                });
            };
        });

        function initScript() {
            promise = new Promise(function(resolve,reject) {
                try {
                    if(typeof jQuery == 'undefined') {
                        console.warn("jQuery doesn't exists");
                        var jQuery_script = document.createElement("script");
                        jQuery_script.src = "https://code.jquery.com/jquery-2.2.4.min.js";
                        jQuery_script.type = 'text/javascript';
                        jQuery_script.id = "__jquery";
                        document.head.appendChild(jQuery_script);
                        resolve("jQuery added succesfully.");
                    }
                    resolve("jQuery exists.")
                } catch (ex) {
                    reject("Something went wrong on initScript() : ", ex);
                }
            });
            return promise;
        }

    })();

I used promise because if there is no jQuery in the page we need to wait to load it first.

.ready will not fire since your script loads async.

This should the first thing to run on the page and block all other scripts in order to load the dependencies on time.

Appending to body:

function loadScript() {
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'http://www.mydomain/myscript.js';
   script.async = true;
   document.body.appendChild(script);
}

Appending to head:

function loadScript() {
   var head= document.getElementsByTagName('head')[0];
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'http://www.mydomain/myscript.js';
   script.async = true;
   head.appendChild(script);
}

Usually when you include some scripts, browser will load them synchronously, step by step.

But if you set

script.async = true;

script will load asynchronously and other scripts will not waiting for them. To fix this problem you can remove this option.

There is an onload event on the script. Use that.

  <!doctype html>
    <html>
    <head>
        <script type="text/javascript">
            window.onload = function() {
                var script = document.createElement('script');
                script.type = "text/javascript";
                script.src = "http://code.jquery.com/jquery-2.1.1.min.js";
                document.getElementsByTagName('head')[0].appendChild(script);

                script.onload = function() {
                    $('#testing').html('<p>This is a paragraph!</p>');
                }; 

            }; 
        </script>
    </head>
    <body>
    <div id="testing"></div>

    </body>
    </html>

Check your browsers js console. You will probably see something like $ is undefined and not a function. It is because you are running the code in

You can try to wrap the jquery code you want to run in the readyStateChange event of the script tag. Or you can use require.js.

There is a working demo http://jsbin.com/lepapu/2/edit (Click "Run with JS")

<script>
if(!window.jQuery)
{document.write('<script src=http://code.jquery.com/jquery-2.1.1.min.js><\/script>')}
</script>

<script>
$(document).ready(function(){
    $('body').html('<p>This is a paragraph!</p>');
});
</script>

The order of scripts matters.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

How to include jQuery dynamically in any website using pure javascript - Stack Overflow

9 Answers 9

与本文相关的文章

评论列表(0)