jquery - Standard way to include javascript library from javascript - Stack Overflow

admin管理员组

文章数量:1310404

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 = ".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.

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./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.

• jquery
• ajax
• yui
• javascript

Share Improve this question Follow edited Nov 19, 2019 at 16:09 Mosè Raguzzini 15.9k11 gold badge3434 silver badges4545 bronze badges asked Oct 28, 2009 at 23:11 Paul TarjanPaul Tarjan 50.7k5959 gold badges175175 silver badges214214 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

There's only one issue I can think of with this approach (and this has e 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./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.

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 remend using LazyLoad (shameless plug) to bootstrap your script: http://github./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./3.0.0/build/yui/yui-min.js',
init);
   }
})();

If you're looking for a standard way, instead of ing 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.

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

本文标签： jqueryStandard way to include javascript library from javascriptStack Overflow