0

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

4

3 回答 3

2

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

于 2013-05-02T13:45:18.303 回答
0

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

    <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 - 如何确保已加载 jQuery？.

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

于 2013-05-02T14:00:41.680 回答
-1

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

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

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

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

像这样的东西应该工作。

于 2013-05-02T13:57:23.497 回答