How to determine if jQuery is running on a page (even if jQuery is /after/ the detection script)

问题

I'm working on a do-dad that can be embedded in a page like a youtube video. The particular effect I want needs jQuery to work.

I want to load jQuery on the condition that something on the page hasn't already added jQuery.

I though of testing

if (typeof($)=='function'){...

but that only works if jQuery is loaded & running by the time the page gets to my script. Since best practices these days is to embed you scripts in the footer, my embed code probably will never see jQuery most of the time anyway.

I thought of doing the test onready instead of onload, but the onready function is inside of jQuery. (I suppose I could use a standalone script? is there a good one?)

Lastly, I though of testing for jQuery after a timeout delay, but this seems inelegant at best and unreliable at worst.

Any thoughts?

回答1:

Given your constraints, I see only two options:

Use window.load event:

(function() {
    if (window.addEventListener) {
        // Standard
        window.addEventListener('load', jQueryCheck, false);
    }
    else if (window.attachEvent) {
        // Microsoft
        window.attachEvent('onload', jQueryCheck);
    }
    function jQueryCheck() {
        if (typeof jQuery === "undefined") {
            // No one's loaded it; either load it or do without
        }
    }
})();

window.load happens very late in the loading cycle, though, after all images are and such loaded.

Use a timeout. The good news is that the timeout can probably be quite short.

(function() {
    var counter = 0;

    doDetect();
    function doDetect() {
        if (typeof jQuery !== "undefined") {
            // ...jQuery has been loaded
        }
        else if (++counter < 5) { // 5 or whatever
            setTimeout(doDetect, 10);
        }
        else {
            // Time out (and either load it or don't)
        }
    }
})();

You'll have to tune to decide the best values for the counter and the interval. But if jQuery isn't loaded even on the first or second loop, my guess (untested) is that it isn't going to be loaded...unless someone else is doing what you're doing. :-)

回答2:

You can use window.onload. This fires after domReady, so jQuery would surely be loaded by this point.

And check for jQuery, not $. Sometimes people use jQuery with other libraries and use $ for something different.

However, IMHO, I don't think it's a big deal if jQuery gets loaded twice.

回答3:

I've been using this code for to do this very thing for a while now. It also checks for a minimum version of jQuery (in our case, we're still using 1.4.2) before loading:

/* Checks if JQuery is loaded... if not, load it. */
/* Remember to update minimum version number when updating the main jquery.min.js file. */

if (typeof jQuery != 'undefined') {
    /* jQuery is already loaded... verify minimum version number of 1.4.2 and reload newer if needed */
    if (/1\.(0|1|2|3|4)\.(0|1)/.test(jQuery.fn.jquery) || /^1.1/.test(jQuery.fn.jquery) || /^1.2/.test(jQuery.fn.jquery)|| /^1.3/.test(jQuery.fn.jquery)) {
        loadJQ();
    }
} else {
    loadJQ();
}

/* loads jQuery if not already loaded, or if not a recent enough version */
function loadJQ() {
    /* adds a link to jQuery to the head, instead of inline, so it validates */ 
    var headElement = document.getElementsByTagName("head")[0];
    linkElement=document.createElement("script");
    linkElement.src="../scripts/lib/jquery.min.js";
    linkElement.type="text/javascript";
    headElement.appendChild(linkElement);
}

来源：https://stackoverflow.com/questions/5187451/how-to-determine-if-jquery-is-running-on-a-page-even-if-jquery-is-after-the-d

标签

javascript

jquery

detect