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

Cant add jquery to the head dynamically and run jquery code

本文关键字：jquery 头部 运行 代码 添加 动态      更新时间：2023-09-26

我有这个代码：

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);
           });
     }

我基本上可以在加载所有内容后调用一个函数。但这并不奏效。因为 $ 未定义错误也被抛出

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函数，看看这个资源就知道了：停止支付你的jQuery税

由于document.write这里正在创建一个脚本块（这是同步的），您所要做的就是

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