Javascript 如何确定 jQuery 是否在页面上运行（即使 jQuery 是 /after/ 检测脚本）

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

提问by Trass Vasston

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.

我正在研究一个可以嵌入页面的 do-dad，比如 youtube 视频。我想要的特殊效果需要 jQuery 才能工作。

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

我想在页面上的某些内容尚未添加 jQuery 的情况下加载 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.

但这只有在页面到达我的脚本时加载并运行 jQuery 时才有效。由于现在的最佳实践是在页脚中嵌入脚本，因此我的嵌入代码在大多数情况下可能永远不会看到 jQuery。

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

我想进行测试onready而不是onload，但该onready功能在 jQuery 内部。（我想我可以使用独立的脚本吗？有好的脚本吗？）

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

最后，我想在超时延迟后测试 jQuery，但这在最好的情况下似乎不优雅，在最坏的情况下不可靠。

Any thoughts?

有什么想法吗？

采纳答案by T.J. Crowder

Given your constraints, I see only two options:

鉴于您的限制，我只看到两个选项：

1. Use window.loadevent:

   (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.loadhappens verylate in the loading cycle, though, after all images are and such loaded.

2. 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. :-)

1. 使用window.load事件：

   (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情况非常的负载周期的后期，但是，毕竟图像和这样的加载。

2. 使用超时。好消息是超时时间可能很短。

   (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)
           }
       }
   })();
   

   您必须进行调整以确定计数器和间隔的最佳值。但是，如果 jQuery 甚至在第一次或第二次循环中都没有加载，我的猜测（未经测试）是它不会被加载......除非其他人正在做你正在做的事情。:-)

回答by gilly3

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

您可以使用window.onload. 这会在 domReady 之后触发，因此此时肯定会加载 jQuery。

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

并检查jQuery，不是$。有时人们将 jQuery 与其他库一起使用并$用于不同的东西。

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

但是，恕我直言，如果 jQuery 被加载两次，我认为这没什么大不了的。

回答by Lelando

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:

我一直在使用这段代码来做这件事有一段时间了。它还在加载之前检查 jQuery 的最低版本（在我们的例子中，我们仍然使用 1.4.2）：

/* 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);
}