将 jQuery 加载到头部答案

【问题标题】：Loading jQuery into the head将 jQuery 加载到头部
【发布时间】：2013-04-26 17:11:36
【问题描述】：

我正在尝试将一些 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。我错过了什么？

【问题讨论】：

为什么不通过同样的技术加载 App.js？
最初是为了清楚起见。我刚刚尝试过这个，现在 Chrome 给我一个错误，即 $ 不是从 localhost:15 定义的。我不知道这是在哪里抛出的，因为 App.js 在第 13 行使用 $ 来加载标题和一些 css，这些都显示在 head 对象中。

标签： javascript jquery html

【解决方案1】：

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

    <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?。

它既解释了为什么你应该按照我建议的方式去做，也提供了一个（讨厌的）解决方案，如果你仍然选择这样做的话。

【讨论】：

为什么投反对票？我为他当前的问题提供了一个完美的解决方案，以及一个更好的、行业认可的替代方案。
我正在尝试使用此处提到的技术提供递归函数来检测 jQuery，但 jQuery 从未被检测到并且我溢出了堆栈。
jQuery 肯定在页面上并且存在吗？在控制台中尝试记录 $ 以查看页面加载后是否存在...
我现在在 jQuery 的 onload 事件的回调中运行它，因此现在可以加载 App.js。我在正文中有依赖于 $ 并在加载之前运行的代码，因此现在这会导致“$ 未定义”被抛出。试图弄清楚我是否可以在加载脚本之前阻止正文？
这是一个使用纯 JS 监听加载事件的小提琴（没有 jQuery，因为它还不会被加载）jsfiddle.net/4dKae。您需要将脚本放在页面底部，或者，将所有 JS 包装在 $('document').ready(function(){ //Do stuff });这仅在整个主体加载后运行任何 JS。你不应该阻止加载正文，它应该总是先加载，然后是脚本。

【解决方案2】：

这是因为您在标头末尾添加了 jQuery 脚本标记，在 app.js 之后。所以你的 html 看起来像

如果app.js需要jquery，它是在jQuery之前加载的，所以它找不到它需要的。

代替head.appendChild( component );试试：

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

类似的东西应该可以。

【讨论】：

【解决方案3】：

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

【讨论】：

如何检测依赖项何时加载？
监听新脚本元素的load事件
@ubiQ 好问题。不幸的是，这不是一个简单的答案。有很多方法可以做到这一点。自从您使用 jQuery 以来，马上就要尝试 Deferreds 方法：api.jquery.com/deferred.done