2

我在外部 JS 文件中有以下代码（即：test.js）；如果它检测到 JQuery 源不存在，则会创建一个指向 JQuery 源的附加脚本标记。该代码实际上创建了脚本标记并将其插入到正在创建的实际脚本之前：

if (typeof(jQuery) == "undefined") {
 var head = document.getElementsByTagName("head")[0];
 // get any and all script tags 
 var scripts = document.getElementsByTagName("script");
 // the actual script call the actions (ie: this one "test.js")
 thisScript = scripts[scripts.length - 1];
 // create element
 var script = document.createElement("script");
 script.setAttribute("type", "text/javascript");
 script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
head.insertBefore(script,thisScript); 
}

以上工作正常。但是，我遇到的问题是，一旦创建了 JQuery 源脚本标记，“test.js”上的其余代码就不起作用了。就好像代码无法访问 JQuery 函数（或者不知道 JQuery 在那里）。

因此，“test.js”上的以下代码不起作用：

$(document).ready(function() {

 // ...

});

根据 FF 12 的 FireBug，我得到的错误是：“$ 未定义” 关于为什么会发生这种情况或如何解决它的任何想法？

注意：我知道我可以将 JQuery 放在目标页面上；但是，这不是一个选项，因为代码必须能够检测 JQuery 是否存在；如果没有，则创建指向 JQuery 的脚本标记并运行 Jquery 代码。

4

3 回答 3

3

当您像正在做的那样手动插入脚本标记时，该脚本将异步加载。这意味着页面的其他部分不会等待该脚本被加载。

这与页面源中存在脚本标记不同，因为在这种情况下，脚本将同步加载，并且页面的其他部分在加载该脚本之前不会执行。

这样做的结果是，在加载、解析和运行动态插入的脚本标记之前，您的页面 javascript 的其余部分正在执行。因此，您尝试在安装 jQuery 之前使用它。

我知道解决您的问题的两种选择：

  1. 将 jQuery 脚本标签的插入更改为同步加载的内容。我知道这样做的唯一方法是使用document.write()将新的脚本标签写入您的文档，而不是像您正在做的那样将其插入头部。添加到文档中的内容document.write()是同步处理的。

  2. 继续像您正在做的那样动态插入您的脚本，但添加一个监视事件，以便您知道脚本何时已成功加载，并且仅在您收到 jQuery 已成功加载的通知之后运行使用 jQuery 的初始化代码。

还有一些脚本加载库（例如 require.js）将为您执行第二个选项。

于 2012-05-08T21:44:00.793 回答
0

听起来您的加载顺序有问题。'$ is not defined' 错误被触发，因为 jQuery 尚未加载。然后你加载 jQuery。这当然不会重新加载您的第一个脚本，因此错误仍然存​​在。

于 2012-05-08T21:43:08.700 回答
-1

这已在此处得到解答：检查 jQuery 是否包含在 Header (Joomla) 中 

 if (typeof jQuery == 'undefined') { 
   var head = document.getElementsByTagName("head")[0];
   script = document.createElement('script');
   script.id = 'jQuery';
   script.type = 'text/javascript';
   script.src = 'js/jquery.js';
   head.appendChild(script); 
}
于 2012-05-08T21:43:34.253 回答