从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和骨架的并行下载正在发生，有时骨架库的下载早于jQuery，这导致了此错误。

据我所知，如果包括一个脚本标签，它将阻止进一步的请求。所以，一旦我在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);