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() {

 // ...

});

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

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

Answer 1

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

这与页面源代码中存在脚本标签的情况不同，因为在这种情况下，脚本将同步加载，而页面的其他部分将在该脚本加载后才会执行。

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

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

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

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

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