Question

我试图将一些jQuery库动态加载到文档头中。

<head>
  <script src="../js/jQuery.js"></script> 
  <script src="../js/App.js"></script>
</head>

jQuery.js看起来像这样：

(function() {

  /*
   * load all jQuery components
   *
   * @private
   */

  var head = document.getElementsByTagName('head')[0];

  var components = [];

  var jQuery = document.createElement('script');
  jQuery.type = 'text/javascript';
  jQuery.src = 'http://' + location.host + '/js/jquery-1.8.2.min.js';
  components.push(jQuery);

  var jQueryMobile = document.createElement('script');
  jQueryMobile.type = 'text/javascript';
  jQueryMobile.src = 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js';
  components.push(jQueryMobile);

  var jQueryMobileCSS = document.createElement('link');
  jQueryMobileCSS.type = 'text/css';
  jQueryMobileCSS.href = 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css';
  components.push(jQueryMobileCSS);

  var meta = document.createElement('meta');
  meta.name = 'viewport';
  meta.content = 'width=device-width, initial-scale=1';
  components.push(meta);

  components.forEach( function( component ) {
    head.appendChild( component );
  });

  // EDIT - FIX:
  var App = document.createElement('script');
  jQueryMobile.type = 'text/javascript';
  jQueryMobile.src = 'http://' + location.host + '/js/App.js';

  jQuery.onload = function() {
    head.appendChild(App);
  };

})();

console.log显示head对象包含加载jQuery库的脚本标记。 App.js需要jQuery但是却抛出一个错误，声明没有定义jQuery。我错过了什么？

Answer 1

App.js尝试在依赖项完全加载之前执行。您应该在jQuery.js文件中添加一个回调函数，该函数将在其他库加载后加载App.js。

Answer 2

您的App.js加载速度比您的jQuery库快，因此无法找到jQuery。您应该在结束</body>标记之前在HTML底部描述您的JS，而不是在头部动态创建这些元素，例如：

    <script src="http://hostexample.com/js/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script src="../js/App.js"></script>  
</body>

这将确保在使用jQuery之前加载它。

点击此链接：JavaScript - How do I make sure a jQuery is loaded?。

它提供了一个解释，说明为什么你应该按我建议的方式进行，以及如果你仍然选择这样做的话，你可以采用（讨厌的）解决方法。

Answer 3

那是因为你在app.js之后在标题的末尾添加了jQuery脚本标记。所以你的HTML看起来像

如果app.js需要jquery，它会被加载到jQuery中，所以它无法找到它需要的东西。

而不是head.appendChild( component );尝试：

head.insertBefore(component, head.getElementsByTagName('script')[head.getElementsByTagName('script').length - 1])

这样的事情应该有用。

将jQuery加载到头部

3 个答案: