动态加载javascript文件

时间:2015-11-11 13:36:13

标签: javascript jquery

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);
}

但它总是附加最后一个,请建议。

4 个答案:

答案 0 :(得分:7)

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

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

答案 1 :(得分:3)

您在jsElm循环之外声明for,因此在每次迭代时引用相同的元素。在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);
}

答案 2 :(得分:2)

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

在循环中创建脚本元素

答案 3 :(得分:0)

您始终更新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);
}