动态加载javascript文件

Question

var _scriptUrl = [ 
    'vendor/jquery/jquery-1.9.1.min.js', 
    'vendor/angular/angular.js', 
    'vendor/angular/angular-cookies.js', 
    'vendor/bootstrap/js/bootstrap.min.js', 
    'vendor/bootstrap/js/bootstrap-datepicker.js' 
] 

var jsElm = document.createElement("script"); 
jsElm.type = "application/javascript"; 

for(var i = 0; i < _scriptUrl.length; i++) 
{ 
    jsElm.src = _scriptUrl[i]; 
    document.body.appendChild(jsElm); 
} 

但它总是只追加最后一个，请建议。

Answer 1

尝试在循环中追加子项。在你的例子中，你只有一个脚本实例。

for(var i = 0; i<_scriptUrl.length; i++) 
{ 
    var jsElm = document.createElement("script"); 
    jsElm.type = "application/javascript"; 
    jsElm.src = _scriptUrl[i]; 
    document.body.appendChild(jsElm); 
} 

如果您认真对待js的异步加载，请尝试requirejs。

Answer 2

您正在创建一个<script>，然后快速更改它的src，以便只有最后一个有足够的时间加载。

创建脚本元素里面的循环。

Answer 3

您在for循环之外声明jsElm，因此在每次迭代中引用相同的元素。将此声明移至for循环中：

var _scriptUrl = [ 
    'vendor/jquery/jquery-1.9.1.min.js', 
    'vendor/angular/angular.js', 
    'vendor/angular/angular-cookies.js', 
    'vendor/bootstrap/js/bootstrap.min.js', 
    'vendor/bootstrap/js/bootstrap-datepicker.js' 
] 

for (var i = 0; i < _scriptUrl.length; i++) { 
    var jsElm = document.createElement("script"); 
    jsElm.type = "application/javascript"; 
    jsElm.src = _scriptUrl[i]; 
    document.body.appendChild(jsElm); 
} 

Answer 4

您随时更新jsElm.src。

for(var i= 0;i<_scriptUrl.length;i++) 
{ 
    var jsElm = document.createElement("script"); 
    jsElm.type = "application/javascript"; 
    jsElm.src = _scriptUrl[i]; 
    document.body.appendChild(jsElm); 
}