Question

我有这段代码：

function init(){
    if (typeof window.jQuery !== 'function') {
        var link = document.createElement('script');
        link.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        document.getElementsByTagName('head')[0].appendChild(link);
    }
}

window.onload = init;

 if (typeof window.jQuery === 'function')  {
    $(document).ready(function(){
        alert(1);
    });
}

我想要做的是如果jQuery不存在则添加jquery脚本链接到头部，然后运行代码。最好的方法是尽快检查头部是否存在jquery，然后添加一个指向源的链接。但我不知道如何实现这个目标？

更新另一种方法是使用函数：

  function init(){
   if (typeof window.jQuery !== 'function') {
      var link = document.createElement('script');
      link.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
      document.getElementsByTagName('head')[0].appendChild(link);
      start_code();
   }
   else{
       start_code();
   }
}  
window.onload = init;
function start_code(){
           $(document).ready(function(){
                alert(1);
           });
     }

我可以基本上在一切都被加载后调用一个函数..但这不能很好地工作。导致$未定义错误也被抛出

Answer 1

function init(){
   if (typeof window.jQuery !== 'function') {
      var link = document.createElement('script');
      link.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
      document.getElementsByTagName('head')[0].appendChild(link);
   }
}

或使用HTML5 boilerplate方法

<script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

将此脚本放在页面底部（出于性能目的）。然后，如果您之前需要使用jQuery函数，请查看此资源：stop paying your jQuery tax

因为document.write这里正在创建一个脚本 block （这是同步的）所有你需要做的只是

<script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.7.2.min.js"><\/script>')</script>
<script>
    $(document).ready(function(){
        alert(1);
    });
</script>

无法动态地将jquery添加到头部并运行jquery代码

1 个答案: