3

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

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

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

lib.js 

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

初始化.js

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 会弹出“我在这里”，然后以错误“未定义核心”结束。当然，合并这两个 JS 文件将使它们完美地工作。

我只是不明白它o_O。

编辑

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

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

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

重新加载 test.html > 运行书签 > 插入 jquery 和 init.js > 插入 lib.js

对困惑感到抱歉。

编辑 2

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

4

5 回答 5

5

jQuery 使用getScript内置了这个功能。

于 2009-05-25T06:59:57.987 回答
3

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

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

$.getScript('lib.js', function() {
    var c = new core();
});
于 2009-05-25T08:26:07.437 回答
1

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

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

c = new core()

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

我建议移动 c = new core(); 进入 $(document).ready(function() {...}); 或在正文标记之后进入脚本元素。

于 2009-05-25T06:56:59.317 回答
1

IMO，将脚本标签附加到文档末尾以加载脚本是相当难看的。原因：

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

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

但是，第二种方法有一些问题：如果您在函数内部调用了 eval()，那么脚本将在它之外不可用！这要求解决方法...

但何必呢！使用 $.getScript() 并克服它:)

干杯，jrh。

于 2009-05-25T07:13:48.677 回答
1

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

于 2009-05-25T07:56:39.167 回答