腳本不執行動態生成的JQuery腳本標記

我在外部JS文件（即：test.js）中有以下代碼;如果它檢測到JQuery源不在那裏，它會創建一個指向JQuery源的附加腳本標記。該代碼實際上創建腳本標記並將其插入創建的實際腳本之前：腳本不執行動態生成的JQuery腳本標記

if (typeof(jQuery) == "undefined") { 
var head = document.getElementsByTagName("head")[0]; 
// get any and all script tags 
var scripts = document.getElementsByTagName("script"); 
// the actual script call the actions (ie: this one "test.js") 
thisScript = scripts[scripts.length - 1]; 
// create element 
var script = document.createElement("script"); 
script.setAttribute("type", "text/javascript"); 
script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"); 
head.insertBefore(script,thisScript); 
}

上述工作正常。但是，我遇到的問題是，一旦創建了JQuery源腳本標記，「test.js」中的其他代碼就無法工作。就好像代碼無法訪問JQuery函數（或者不知道JQuery在那裏）。

因此，在「test.js」下面的代碼不起作用：

$(document).ready(function() { 

// ... 

});

我根據螢火蟲與FF 12得到的錯誤是：「$沒有定義」任何想法至於爲什麼會發生這種情況，或者我可以如何解決它？

注：我知道我可以只需將JQuery的目標頁面上;然而，這不是一個選項，代碼必須能夠檢測到JQuery是否存在;如果不是，則創建指向JQuery的腳本標記並運行Jquery代碼。

來源

2012-05-08 C King

當您插入腳本標籤手動像你正在做的，該腳本異步加載。這意味着頁面的其他部分不會等待該腳本加載。

這比如果腳本標籤存在於頁面的源，因爲在這種情況下，腳本將同步加載和頁面的其他部分將不執行該腳本被加載之後，直到不同。

這樣做的結果是，你的頁面的JavaScript是動態插入腳本標籤之前執行，其餘已被加載，解析和運行。因此，您正試圖在安裝jQuery之前使用jQuery。

我所知道的兩個選項爲您解決問題：

更改您的jQuery腳本標籤插入的東西，負載同步。我知道要做到這一點的唯一方法是使用document.write()將新腳本標記寫入文檔，而不是像插入到頭部一樣。用document.write()添加到文檔中的東西會被同步處理。
繼續像你一樣動態地插入腳本，但添加一個監視事件，以便知道何時腳本已成功加載，並且只運行使用jQuery的初始化代碼後，您會得到jQuery已發出的通知成功加載。

還有腳本加載庫（例如require.js）會爲您做第二個選項。

來源

2012-05-08 21:44:00 jfriend00

太棒了！初始化代碼？拍我的腦袋。不知道爲什麼它沒有發生在我身上。很好的答案。謝謝！ –

嘗試使用if-then控件，onload事件，settimeout和其他幾種方法來執行初始化代碼，但沒有運氣;仍然獲得'$未定義'。唉，我有限的編碼經驗只能帶我到目前爲止。我真的很感激一些指導。不要抓住require.js的東西。再次感謝您的幫助。 –

好的。閱讀hunlock dot com上的一篇文章，並找出它。在函數中包裝'$ document.ready（...'，並使用變量'script'的onload事件調用它。再次感謝您的幫助。 –

這聽起來像您有加載順序的問題。 '$ is not defined'錯誤被觸發，因爲jQuery尚未加載。然後你加載jQuery。這當然不會重新加載你的第一個腳本，所以錯誤的立場。

來源

2012-05-08 21:43:08

-1

這已經在這裏找到答案：Check if jQuery is included in Header (Joomla)

if (typeof jQuery == 'undefined') { 
    var head = document.getElementsByTagName("head")[0]; 
    script = document.createElement('script'); 
    script.id = 'jQuery'; 
    script.type = 'text/javascript'; 
    script.src = 'js/jquery.js'; 
    head.appendChild(script); 
}

來源

2012-05-08 21:43:34 lucuma

你也可以使用類似require.js的東西。 http://requirejs.org/docs/jquery.html – lucuma

腳本不執行動態生成的JQuery腳本標記

回答

相關問題