javascript - 脚本未使用动态生成的 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 与 FF 12 的说法，我收到的错误是:“$ 未定义” 关于为什么会发生这种情况或如何解决它有什么想法吗？

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

Answer 1

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

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

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

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

1. 将 jQuery 脚本标记的插入更改为同步加载的内容。我知道执行此操作的唯一方法是使用 document.write() 将新的脚本标记写入文档，而不是像您一样将其插入到 head 部分。使用 document.write() 添加到文档中的内容是同步处理的。

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

还有脚本加载库(例如 require.js)可以为您执行第二个选项。