使用javascript将脚本加载到页面_Javascript

使用javascript将脚本加载到页面

javascript

使用javascript将脚本加载到页面,javascript,Javascript,我创建了一些函数，可以将另一个文件加载到我的页面（我正在创建一个库，我想让所有js文件都可以在一行中加载）这是HTML文件的一部分： <head> <title>Example</title> <script src="ENGINE/libs/jquery.js"></script> <script src="ENGINE/load.js"></script> <sc

我创建了一些函数，可以将另一个文件加载到我的页面（我正在创建一个库，我想让所有js文件都可以在一行中加载）

这是HTML文件的一部分：

<head>

    <title>Example</title>

    <script src="ENGINE/libs/jquery.js"></script>
    <script src="ENGINE/load.js"></script>

    <script src="EXAMPLE.js"></script>

</head>

问题是：我收到错误，因为这个站点上的另一个脚本声称库中的函数未定义。这些文件是否异步加载？如果是，如何在加载库之前停止加载页面？

这是我用来在运行时加载单独JS文件的代码

 function loadScript(url, success) {
    var script = document.createElement("script");
    script.src = url;
    var head = document.getElementsByTagName("head")[0],
            done = false;
    script.onload = script.onreadystatechange = function() {
       if (!done && (!this.readyState ||
               this.readyState === "loaded" ||
               this.readyState === "complete")) {
          done = true;
          if (success)
             success();
          script.onload = script.onreadystatechange = null;
          head.removeChild(script);
       }
    };
    head.appendChild(script);
 }

然后，为了确保脚本已加载，我检查了我想使用的函数，如下所示：

 var myModule = (function(my) {
    my.doOperations = function(a, b) {
       var ret = {};
       ret.c = my.addNumbers(a, b);
       ret.d = my.difNumbers(a, b);

       if (myModule.hasOwnProperty("multNumbers")) {
          ret.e = my.multNumbers(a, b);
       }
       else {
          myModule.printToPage("Script not loaded yet")
       }
       return ret;
    };
    my.printToPage = function(textToPrint) {
       var newDiv = document.createElement("div");
       newDiv.innerHTML = textToPrint;
       document.getElementsByTagName("body")[0].appendChild(newDiv);
    };
    return my;
 }(myModule || {}));

var scripts = [
  'http://' + window.location.host + '/jquery/jquery-1.11.2.min.js',
  'http://' + window.location.host + '/jquery-ui-1.11.4/jquery-ui.min.js',
  'http://' + window.location.host + '/d3/d3.min.js'
  'http://' + window.location.host + '/my/stuff.js'
];

var head = document.getElementsByTagName('head')[0];
for (i = 0; i < scripts.length; i++) {
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = scripts[i];
  head.appendChild(newScript);
}

实际上，我创建了一个系统，可以帮助实现这一点。您可以通过回调链使用它来加载一些常用库：

/* Initialize all external resources */
skitch.initLibs("jquery","js",function() {
    skitch.initLibs('bootstrap','js',function(){
        skitch.initLibs('bootstrap','css',function(){
            myCodeStart();
        });
    });
});
/* Begin Code */
function myCodeStart(){  
        alert("Everything's loaded!")
}

以下是可重用系统的代码：

var skitch = {
    initLibs: function (t, n, r) {
        if (n == "js") {
            if (t == "$" || t == "jquery" || t == "jQuery") {
                var i = document.getElementsByTagName("head")[0];
                var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "http://code.jquery.com/jquery-latest.min.js";
                s.onreadystatechange = r;
                s.onload = r;
                i.appendChild(s);
                console.log("jquery js")
            }
            if (t == "bootstrap") {
                var i = document.getElementsByTagName("head")[0];
                var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js";
                s.onreadystatechange = r;
                s.onload = r;
                i.appendChild(s);
                console.log("bootstrap js")
            }
        } else if (n == "css") {
            if (t == "bootstrap") {
                var o = document;
                var u = "myCss";
                if (!o.getElementById(u)) {
                    var i = o.getElementsByTagName("head")[0];
                    var a = o.createElement("link");
                    a.id = u;
                    a.rel = "stylesheet";
                    a.type = "text/css";
                    a.href = "http://twitter.github.io/bootstrap/assets/css/bootstrap.css";
                    a.media = "all";
                    a.onreadystatechange = r;
                    a.onload = r;
                    i.appendChild(a);
                    console.log("bootstrap css")
                }
            }
        }
    }
}

这并不是一个始终完整的证明方法，需要在加载所有内容后执行内联脚本。对于一个成熟的系统，我建议您研究一下

RequireJS

（）。

我使用它，它比您想象的更有用

您可以将其添加到html页面，如下所示：

<script data-main="scripts/main" src="scripts/require.js"></script>

它甚至修复了不同javascript库之间的冲突，它为jQuery及其AMD模块提供了非常好的解决方案，如：

require.config({
baseUrl: 'js/lib',
paths: {
    // the left side is the module ID, the right side is the path to
    //the jQuery file, relative to baseUrl. Also, the path should NOT include
    // the '.js' file extension. This example is using jQuery 1.9.0 located at
    // js/lib/jquery-1.9.0.js, relative to the HTML page.
        jquery: 'jquery-1.9.0'
    }
});

是的，默认情况下异步加载脚本。我写了一个与你类似的代码，也面临同样的问题。我的代码最初是这样的：

 var myModule = (function(my) {
    my.doOperations = function(a, b) {
       var ret = {};
       ret.c = my.addNumbers(a, b);
       ret.d = my.difNumbers(a, b);

       if (myModule.hasOwnProperty("multNumbers")) {
          ret.e = my.multNumbers(a, b);
       }
       else {
          myModule.printToPage("Script not loaded yet")
       }
       return ret;
    };
    my.printToPage = function(textToPrint) {
       var newDiv = document.createElement("div");
       newDiv.innerHTML = textToPrint;
       document.getElementsByTagName("body")[0].appendChild(newDiv);
    };
    return my;
 }(myModule || {}));

var scripts = [
  'http://' + window.location.host + '/jquery/jquery-1.11.2.min.js',
  'http://' + window.location.host + '/jquery-ui-1.11.4/jquery-ui.min.js',
  'http://' + window.location.host + '/d3/d3.min.js'
  'http://' + window.location.host + '/my/stuff.js'
];

var head = document.getElementsByTagName('head')[0];
for (i = 0; i < scripts.length; i++) {
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = scripts[i];
  head.appendChild(newScript);
}

您不使用

RequireJS

或

Head.JS

的任何原因？如果你想把它作为一个练习，可以，但是那些库已经解决了你的问题，还有更多的问题。要么使用asyncjs、requirejs之类的东西，要么确保等待其他脚本（script.onload，尽管这会让回调链变得非常糟糕）

var scripts = [
  'http://' + window.location.host + '/jquery/jquery-1.11.2.min.js',
  'http://' + window.location.host + '/jquery-ui-1.11.4/jquery-ui.min.js',
  'http://' + window.location.host + '/d3/d3.min.js'
  'http://' + window.location.host + '/my/stuff.js'
];

var head = document.getElementsByTagName('head')[0];
for (i = 0; i < scripts.length; i++) {
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = scripts[i];
  newScript.async = false;
  head.appendChild(newScript);
}

function loadJSfromFile(src) {
    var h = document.getElementsByTagName('head').item(0);
    var s = document.createElement("script");
    //s.type = "text/javascript";
    s.src = src;
    s.async = false;
    h.appendChild(s);
};