CODEWITHSUNDEEP
jqueryajaxyuijavascript
Paul Tarjan
Paul Tarjan

Reputation: 50642

Standard way to include javascript library from javascript

I'd like to pull in the jquery library from my javascript include.

Does this work 100% of the time? Is there a better way?

(function() {

var loadJquery = function (cb) {
    var addLibs = function () {
        if (typeof(document.body) == "undefined" || document.body === null) {
            setTimeout(addLibs, 100);
            return;
        }

        var node = document.createElement("script");
        node.src = "http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js";
        document.body.appendChild(node);
        checkLib();
    };

    var checkLib = function () {  
        if (typeof($) == "undefined" || $("*") === null) {
            setTimeout(checkLib, 100);
            return;
        }
        cb($.noConflict());
    }
    addLibs();
}

loadJquery(function($){
  // Do stuff with $
  $(document.body).css("background", "black");
});

})();

Change the node.src and $.noConflict to YUI if you want YUI3, or YAHOO if you're YUI2, etc.

Upvotes: 5

Views: 4851

Answers (4)

nornagon
nornagon

Reputation: 15831

See my answer here for a reliable asynchronous require() function: How do I include a JavaScript file in another JavaScript file?

Upvotes: 0

Paul Tarjan
Paul Tarjan

Reputation: 50642

From posting on our internal mailing lists at work, I was pointed to this:

There are many cross-browser edge cases involved in dynamically injecting scripts. If rolling the YUI 3 seed file into your script isn't an option and if you can't depend on the property to already have the YUI 3 seed loaded, I'd recommend using LazyLoad (shameless plug) to bootstrap your script: http://github.com/rgrove/lazyload/

You can merge lazyload.js into your script, then use something like this to load the YUI 3 seed if it's not already on the page:

(function () {
   function init() {
     YUI().use('node', function (Y) {
       // ... do my stuff ...
     });
   }

   if (YUI) {
     init();
   } else {
     LazyLoad.js('http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js',
init);
   }
})();

Upvotes: 2

Ateş Göral
Ateş Göral

Reputation: 140112

If you're looking for a standard way, instead of coming up with your own implementation, you could perhaps consider:

  • Google's google.load() for loading popular libraries
  • The CommonJS SecurableModules - see Kris Kowal's Chiron for a browser implementation.

Upvotes: 0

Crescent Fresh
Crescent Fresh

Reputation: 116998

There's only one issue I can think of with this approach (and this has come up twice in questions on SO in the last month).

The issue is that jQuery as of 1.3.2 cannot detect if the document is loaded if it is itself included after the document has loaded (i.e. dynamic <script> inclusion as you are doing, bookmarklet, etc) in non-IE browsers. In such cases the function passed to .ready() will never be called.

Here is the bug report for the issue: http://dev.jquery.com/ticket/4196 Nothing has happened with it for the last 8 months.

Now, the way you have designed loadJquery as I see it should effectively replace $(document).ready() so you may not need to worry. But any code that is written in the $(document).ready() function-passing style will not execute.

Upvotes: 4

Related Questions