Question

我正在使用JQuery在网页的正文选项卡中动态注入脚本标记。我有类似的东西：

function addJS(url) {
  $("body").append('<script type="text/javascript" src='+url+'></script>'); 
}

我以这种方式添加了几个脚本，然后尝试使用它们。 E.G：

lib.js

function core() {...}
alert("I'am here !");

init.js

addJS("lib.js");
c = new core();

的test.html

<html>
  <head>
    <title>test</title>        
    <script type="text/javascript" src="init.js"></script> 
  </head>
  <body>
     Hello
  </body>
</html>

正在加载test.html弹出“我在这里”，最后出现错误“核心未定义”。当然合并两个JS文件将使它们完美地工作。

我只是不明白o_O。

修改

我简化了这个例子，但杰夫回答让我明白这是一个错误。所以这里有一些细节：

init.html在重新加载时不在test.html的头部，因为我用一个书签上的代码注入了它。

所以真正的执行过程如下：

reload test.html＆gt;运行bookmarklet＆gt;插入jquery和init.js＆gt;插入了lib.js

很抱歉这个混乱。

编辑2

现在我有解决问题的方法（很快:-)）但我仍然对我的问题的答案感兴趣。为什么会出错？

Answer 1

jQuery使用getScript内置了此功能。

Answer 2

您收到“未定义核心”错误，因为脚本是异步加载的。这意味着您的浏览器将在后台开始加载lib.js，并继续执行init.js，然后在lib.js加载完成之前遇到“new core（）”。

getScript函数有一个回调，将在脚本加载完成后触发：

$.getScript('lib.js', function() {
    var c = new core();
});

Answer 3

请注意，您的addJS函数将附加到body元素的末尾。

由于浏览器将运行HTML源代码中出现的脚本，

c = new core()

将在加载lib.js脚本之前运行（在body元素的末尾）。

我建议移动c = new core（）;进入$（document）.ready（function（）{...}）;或者在身体标签之后的脚本元素中。

Answer 4

IMO，将脚本标记附加到文档的末尾以加载脚本是相当不雅观的。原因是：

您信任浏览器自动获取脚本并加载它。
您无法确定脚本是否正在加载，是否已加载，或者是否遇到错误（可能是404？）

适当的方法是使用$ .getScript（），或者对于更精细的控件，使用$ .ajax（）获取脚本文件并使用eval（）。

但是，第二种方法存在一些问题：如果在函数内部调用eval（），那么脚本将无法在其外部使用！这要求解决方法......

但为什么这么麻烦！使用$ .getScript（）并克服它：）

Answer 5

响应您的代码失败的原因：向正文添加脚本标记不会阻止进一步的脚本执行。您的代码会添加它，从而启动浏览器下载过程。同时，您的脚本会尝试调用core()，因为lib.js尚未完成下载，因此不存在{{1}}。 jQuery之所以有效，是因为它在执行回调函数之前等待脚本完成下载。

如何动态加载Javascript文件并立即使用它们？

5 个答案: