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我得到的错误是：“$未定义” 关于为什么会这样或者我如何解决它的任何想法？

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

Answer 1

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

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

结果是，在加载，解析和运行动态插入的脚本标记之前，页面javascript的其余部分正在执行。因此，您在尝试使用jQuery之前就已经尝试过了。

我知道解决问题的两个选项：

将jQuery脚本标记的插入更改为同步加载的内容。我知道这样做的唯一方法是使用document.write()将新的脚本标记写入您的文档，而不是像您一样将其插入到head部分。使用document.write()添加到文档中的内容将同步处理。
继续像您一样动态插入脚本，但添加一个监视事件，这样您就可以知道脚本何时成功加载，并且只运行使用jQuery的初始化代码，当您获得jQuery具有的通知时已成功加载。

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

Answer 2

听起来您在加载订单时遇到问题。由于尚未加载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); 
}

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

3 个答案: