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

Question

我正在研究可嵌入页面中的do-dad，如YouTube视频。我想要的特殊效果需要jQuery的工作。

我想加载jQuery的条件是页面上的东西还没有添加jQuery。

我虽然测试

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

，但只有工作，如果jQuery是加载&由页面获取到我的剧本时运行。由于现在的最佳实践是将脚本嵌入到页脚中，因此我的嵌入代码在大多数情况下可能永远不会看到jQuery。

我想到做测试onready而不是onload，但onready函数是在jQuery中。 （我想我可以使用一个独立的脚本？有没有好的一个？）

最后，我虽然在超时延迟后测试jQuery，但这看起来似乎不够好，最差也不可靠。

有什么想法？

Answer 1

鉴于你的约束，我看到的只有两个选择：

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在第一个或第二个循环中没有加载，我的猜测（未经测试）就是它不会被加载......除非别人正在做你正在做的事情。 :-)

Answer 2

您可以使用window.onload。这会在domReady之后触发，所以jQuery肯定会在这一点上加载。

并检查jQuery，而不是$。有时候人们会将jQuery与其他库一起使用，并使用$来实现不同的功能。

但是，恕我直言，我不认为这是一件大事，如果jQuery被加载两次。

Answer 3

我一直在使用这段代码来做这件事情一段时间了。它还会检查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); 
}