在JS内动态加载JS

Question

在JS内动态加载JS我有一个动态网页，需要导入外部JS文件(在IF条件)在另一个javascript文件中。我试图寻找一个可行的解决方案，但没有奏效。我尝试使用以下方法将JS文件加载到DOM中document.createElement()但也没用。显然，Js被加载到DOM中，但在当前的JS文件中无法访问。jquery中的解决方案也很好。

Answer 1

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

jQuery.loadScript = function (url, callback) {
    jQuery.ajax({
        url: url,
        dataType: 'script',
        success: callback,
        async: true
    });}

并把它当作：

if (typeof someObject == 'undefined') $.loadScript('url_to_someScript.js', function(){
    //Stuff to do after someScript has loaded});

Answer 2

我的猜测是，在只使用DOM的解决方案中，您所做的事情如下：

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

首先，因为脚本没有添加到文档树中，所以不会被加载，所以这是行不通的。此外，即使您这样做，在加载其他脚本时，javascript的执行仍在继续，因此在完全加载该脚本之前，它的内容是不可用的。

你可以听剧本的load事件，并按照您的意愿对结果进行处理。因此：

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

Answer 3

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

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 <script> 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文件？，这是我的功能理念的来源。