Question

我正在使用jQuery UI处理jQuery插件。在此脚本中http://alexmarandon.com/articles/web_widget_jquery/ 作者只是检查是否添加了jQuery库。但我需要检查jQuery和jQuery UI。

如果未加载，则加载它。当我尝试这样做然后由于同步过程我得到错误jQuery / jQuery-ui没有定义你可以帮助我。

由于

(function() {
  
  // Localize jQuery variable
  var jQuery;
  
  /******** Load jQuery if not present *********/
  if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.10.2') {
    console.log('In if of index js');
      var script_tag = document.createElement('script');
      script_tag.setAttribute("type","text/javascript");
      script_tag.setAttribute("src",
          "https://code.jquery.com/jquery-1.10.2.js");
     
      (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
      loadui();
      
  } else {
    console.log('Index end of first if');
    
      // The jQuery version on the window is the one we want to use
      jQuery = window.jQuery;
     // main();
  }
  
  /******** Called once jQuery has loaded ******/
  function scriptLoadHandler() {
    
    console.log('Index loaded');
      // Restore $ and window.jQuery to their previous values and store the
      // new jQuery in our local jQuery variable
      jQuery = window.jQuery.noConflict(true);
      // Call our main function
      loadui();
  }
  
  function script2LoadHandler() {
    
    console.log('Index2 loaded');
      // Restore $ and window.jQuery to their previous values and store the
      // new jQuery in our local jQuery variable
      
     main()
     
  }
  /******** Our main function ********/
  function main() {  
    setTimeout(myFunction, 3000);
    
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src",
            "js/scripts.js");
        
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
   
  }

  function myFunction(){

  console.log("asdasdasdasdas");
  }

  
  function loadui(){
    console.log('Loadui2');
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "https://code.jquery.com/ui/1.10.4/jquery-ui.js");
  
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    main();

  }
  
  })();

Answer 1

这是如何检查库是否已加载

var s;
if (typeof jQuery === 'undefined'){
   // jquery not loaded 
      s = document.createElement('script');
      s.src = "https://code.jquery.com/jquery-3.2.1.js";
     document.head.appendChild(s);
}

if (typeof jQuery.ui === 'undefined'){
   // jquery ui not loaded
   s = document.createElement('script');
      s.src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js";
     document.head.appendChild(s);
}

这是如何加载一个可以依赖加载一个接一个。

＆＃13;

var s;
if (typeof jQuery === 'undefined') {

  // jquery not loaded 
  s = document.createElement('script');
  s.src = "https://code.jquery.com/jquery-3.2.1.js";
  document.head.appendChild(s);

  // jquery load
  s.onload = function() {

      // jquery ui you cant load without jquery so
      s = document.createElement('script');
      s.src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js";
      document.head.appendChild(s);
  
      // jquery version
      console.log(jQuery.fn.jquery);

      // jquery ui load
      s.onload = function() {

         // jquery ui version
         console.log(jQuery.ui.version);
      }
  }
}

＆＃13;

Answer 2

正如this post所述，您可以通过检查其类型

来做一个条件

if (typeof jQuery != "undefined"){   //check if jQuery Exists 

    if (typeof jQuery.ui != "undefined"){  //check if jQueryui library has been loaded

    }

}

如果没有加载，加载两个jQuery

2 个答案: