javascript - 从 javascript 代码在 DOM 中添加外部脚本

Question

我在正文末尾包含了 3 个外部 js 文件。 假设我的文档已经包含一个名为 insertlibs.js 的 js，代码如下

var script1 = document.createElement('script');
script1.src='http://code.jquery.com/jquery-latest.js';
script1.type='text/javascript';
document.getElementsByTagName('Body').item(0).appendChild(script1);

// Similar way to include underscore

var script2 = document.createElement('script');
script2.src='hhttp://documentcloud.github.com/backbone/backbone-min.js';
script2.type='text/javascript';
document.getElementsByTagName('Body').item(0).appendChild(script2);  

但有时会发生什么，它抛出一个错误 $ 未定义，我尝试在 Firefox 中进行调试，并且 jquery 和 Backbone 发生并行下载，有时 Backbone 库比 jQuery 更早下载，这导致了这种情况错误。

据我所知，如果包含 script 标签，它将阻止进一步的请求，所以一旦我在 dom 中添加 jquery。我对这里发生的工作流程感到困惑。

所以我找到了解决方案，我合并了 js 并进行了一次调用，该调用运行良好，但这并不能解释上述情况下发生的流程。请帮忙。

Answer 1

这是因为您试图包含主干而不确保 jquery 已完全加载。要纠正此问题，您可以使用脚本的 onload 属性附加一个回调，该回调将在加载 jquery 时触发。

例如:

var script1 = document.createElement('script');
script1.src='http://code.jquery.com/jquery-latest.js';
script1.type='text/javascript';

// add an onload handler
script1.onload = function() {

   // load the rest of the scripts here

   var script2 = document.createElement('script');
   script2.src='hhttp://documentcloud.github.com/backbone/backbone-min.js';
   script2.type='text/javascript';
   document.getElementsByTagName('Body').item(0).appendChild(script2);
}

document.getElementsByTagName('Body').item(0).appendChild(script1);