脚本未使用动态生成的 JQuery 脚本标记执行

Question

我在外部 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() {

 // ...

});

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

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

Answer 1

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

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

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

我知道有两种方法可以解决您的问题：

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

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

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

Answer 2

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

Answer 3

这里已经回答了这个问题：Check if jQuery is included in 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); 
}