关于javascript：在JS中动态加载JS文件


Dynamically load JS inside JS

本问题已经有最佳答案，请猛点这里访问。

我有一个动态网页，需要在另一个javascript文件中导入一个外部JS文件(在IF条件下)。

我试图寻找一个可行的解决方案，但没有奏效。

我尝试使用document.createElement()将JS文件加载到DOM，但它也不起作用。显然，JS已加载到DOM中，但在当前JS文件中无法访问。

jquery中的解决方案也很好

相关讨论

我的猜测是，在您的DOM唯一解决方案中，您执行了如下操作：

1
2
3
var script = document.createElement('script');
script.src = something;
//do stuff with the script

首先，这不起作用，因为脚本没有添加到文档树中，所以不会被加载。此外，即使这样做了，也会在加载另一个脚本时继续执行JavaScript，因此在该脚本完全加载之前，它的内容将不可用。

您可以聆听脚本的load事件，并按照自己的意愿处理结果。所以：

1
2
3
4
5
6
7
var script = document.createElement('script');
script.onload = function () {
    //do stuff with the script
};
script.src = something;

document.head.appendChild(script); //or something of the likes
相关讨论

jquery的$.getScript()有时有问题，所以我使用自己的实现，比如：

1
2
3
4
5
6
7
8
jQuery.loadScript = function (url, callback) {
    jQuery.ajax({
        url: url,
        dataType: 'script',
        success: callback,
        async: true
    });
}

使用方式如下：

1
2
3
if (typeof someObject == 'undefined') $.loadScript('url_to_someScript.js', function(){
    //Stuff to do after someScript has loaded
});
相关讨论

我需要经常这样做，所以我使用这个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var loadJS = function(url, implementationCode, location){
    //url is URL of external file, implementationCode is the code
    //to be called from the file, location is the location to
    //insert the  element

    var scriptTag = document.createElement('script');
    scriptTag.src = url;

    scriptTag.onload = implementationCode;
    scriptTag.onreadystatechange = implementationCode;

    location.appendChild(scriptTag);
};
var yourCodeToBeCalled = function(){
//your code goes here
}
loadJS('yourcode.js', yourCodeToBeCalled, document.body);

有关详细信息，请参阅此站点如何在另一个javascript文件中包含javascript文件？这就是我的函数思想的来源。

相关讨论