如何確定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); 
}