javascript - 动态加载jquery

Question

我在一个非常扭曲的环境中工作，我无法通过我正在使用的 MVC 框架 (Cakephp) 的 View 逻辑来处理这个问题。这可能会发生，因为我必须将这段代码加载到一个已经加载了 jQuery 脚本的页面中。

如果我只是在我的代码中加载 jQuery，只要不存在其他 jQuery 脚本，它就可以工作。当有 2 个脚本时，它不起作用并显示 $ is not a function。不太确定这是如何工作的，但解释可能会有所帮助。

无论如何，我已经到了将脚本动态加载到页面中的地步。

所以这是我的代码:

<script id="loadjq" type="text/javascript"></script>
<script id="loadcloud" type="text/javascript"></script>
<script type="text/javascript">
if(typeof jQuery=="undefined"){
    document.getElementById('loadjq').src= 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js';
}
document.getElementById('loadcloud').src= '/js/jqcloud.js';
$(document).ready(function(){
    $("#tagcloud").jQCloud(word_list,{});
});
</script>

这会加载脚本，但是当我尝试加载 jqcloud.js 时，它找不到其他脚本，可能是因为它在加载其他脚本之前运行。通过一些肮脏的技巧我可以解决这个问题，但是当我到达 $(document).ready(function()

时会发生同样的问题

有没有一种干净的方法来做到这一点？我需要它在执行之前等待之前的脚本被加载，或者至少，这就是问题所在。不确定这是否真的是我的问题。

Answer 1

如何在 jquery 脚本元素上设置事件处理程序以在加载完成时调用 jqcloud 脚本。有点像

if(typeof jQuery=="undefined"){
   var loadjqScript = document.getElementById('loadjq').src =
                'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js';
        // Code below handles browser that support script onload 
        // and ones that don't
   var loadFunction = function()  
   {  
      if (this.readyState == 'complete' || this.readyState == 'loaded') {  
           loadJqCloud();   
      }  
   };  
   loadjqScript.onreadystatechange = loadFunction;

   loadjqScript.onload = loadJqCloud;  
}

function loadJqCloud() {
    document.getElementById('loadcloud').src= '/js/jqcloud.js'
 }