代码之家 › 专栏 › 技术社区 › Bite code

如何动态加载javascript文件并立即使用它们?

bookmarklet javascript

Bite code · 技术社区 · 15 年前

我正在使用jquery在网页的body选项卡中动态注入脚本标记。我有点像:

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

我以这种方式添加了几个脚本,并在之后立即尝试使用它们。例如:

LIB JS

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

J.I.J.

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

测试HTML

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

加载test.html弹出“我在这里”,然后出现错误“core is not defined”。当然,合并这两个JS文件将使它们完美地工作。

我就是不明白。

编辑

我简化了这个例子,但杰夫的回答让我明白这是一个错误。下面是一些细节:

当它重新加载时,in it.js不在test.html的头部,因为我注入了一个在bookmarklet上执行的代码。

所以真正的执行过程是:

reload test.html>运行bookmarklet>jquery,插入init.js>插入lib.js

不好意思弄混了。

编辑2

现在我有了我的问题的解决方案(很快就可以了),但我仍然对我的问题的答案感兴趣。为什么会出错?

5 回复 | 直到 15 年前

gregers 15 年前

您会得到“core is not defined”错误,因为脚本是异步加载的。这意味着您的浏览器将开始在后台加载lib.js,并继续执行init.js,然后在lib.js完成加载之前遇到“new core()”。

getscript函数有一个回调,该回调将在脚本加载完成后触发:

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

Paolo Bergantino 15 年前

jquery内置了此功能 getScript .

Jeff Meatball Yang 15 年前

注意,addjs函数正在附加到body元素的末尾。

因为浏览器会在HTML源代码中运行脚本,

c = new core()

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

我建议将c=new core();移到$(document).ready(function()…)中,或者移到body标记后面的脚本元素中。

jrharshath 15 年前

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

您信任浏览器自动获取并加载脚本。
您无法确定脚本是否正在加载、是否已加载,或者是否遇到错误(可能是404?)

适当的方法是使用$.getscript(),或者对于更细粒度的控件,使用$.ajax()获取脚本文件并使用eval()。

但是,第二个方法有一些问题:如果在函数内部调用eval(),那么脚本在函数外部将不可用!这要求解决方案…

但何必麻烦呢!使用$.GetScript()并克服它:)

欢呼,JRH。

Karl Guertin 15 年前

为了响应代码失败的原因:向主体添加脚本标记不会阻止进一步的脚本执行。您的代码将添加它,这将启动浏览器下载过程。同时,你的脚本试图调用 core() 不存在的原因是 lib.js 尚未完成下载。jquery工作是因为它在执行回调函数之前等待脚本完成下载。