在另一個js文件中加載jQuery

Question

我有一個JavaScript文件，它也使用jQuery。加載它，我寫了這個代碼：

function include(filename) 
{ 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.src = filename; 
    script.type = 'text/javascript'; 
    head.appendChild(script) 
} 

include('http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'); 
alert("1"); 

$(document).read(function(){}); 
alert("2"); 

這將激活alert("1")，但第二alert不起作用。當我檢查元素時，我看到一個錯誤，表示$未定義。

我應該如何解決這個問題？

Answer 1

您需要執行一次腳本加載任何jQuery的特定代碼，這顯然會追加到頭部後，在更晚的點發生在時間：

function include(filename, onload) { 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.src = filename; 
    script.type = 'text/javascript'; 
    script.onload = script.onreadystatechange = function() { 
     if (script.readyState) { 
      if (script.readyState === 'complete' || script.readyState === 'loaded') { 
       script.onreadystatechange = null;             
       onload(); 
      } 
     } 
     else { 
      onload();   
     } 
    }; 
    head.appendChild(script); 
} 

include('http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js', function() { 
    $(document).ready(function() { 
     alert('the DOM is ready'); 
    }); 
}); 

而這裏是live demo。

您也可以看看腳本加載器，如yepnope或RequireJS，這使得這項任務更容易。

Answer 2

這裏的問題可能是，即使您包含腳本，但並不意味着它會在您嘗試執行時加載$(document).ready(function(){});。你可以看看谷歌Loader來防止這個問題http://code.google.com/intl/fr-FR/apis/loader/