使用javascript將腳本加載到頁面

我創建了一些函數（應該）將另一個文件加載到我的頁面（我正在創建一個庫，並且希望將所有js文件加載到一行中）。使用javascript將腳本加載到頁面

所以這是HTML文件的一部分：

<head> 

    <title>Example</title> 

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

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

</head>

而且load.js：

function loadJSfromFile(src) { 
    var h = document.getElementsByTagName('head').item(0); 
    var s = document.createElement("script"); 
    //s.type = "text/javascript"; 
    s.src = src; 
    h.appendChild(s); 
}; 
loadJSfromFile("libs/canvasManager.js"); 
loadJSfromFile("libs/mainFunctions.js"); 
loadJSfromFile("libs/animations.js"); 
loadJSfromFile("libs/objects.js"); 
loadJSfromFile("libs/collisions.js");

的問題是：我收到錯誤，bacause在這個網站聲稱，從庫函數是另一個腳本未定義。這些文件是異步加載的嗎？如果是的話，如何停止加載頁面，直到圖書館將被加載？

來源

2014-02-12 Piotrek

任何你不使用'RequireJS'或'Head.JS'的理由？如果你想把它當做練習，那很好，但是這些庫已經解決了你的問題，等等。 – Amadan

要麼使用像asyncjs，requirejs或確保您等待其他腳本（script.onload，儘管這將使一個回調鏈的地獄） – Quad

我使用RequireJS，它比你想象的更有幫助。

，你可以把它添加到您的HTML頁面，如：

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

和data-main屬性有您main.js。只要你想使用腳本或其他外部JavaScript庫，這將有助於你喜歡：

//let's say you have util.js in the scripts folder 
require(["scripts/util"], function(util) { 

});

它甚至已經固定不同的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' 
    } 
});

來源

2014-02-12 18:40:26

這是我用來在運行時加載單獨的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 || {}));

來源

2014-02-12 18:31:29 zero298

其實我創建了一個系統，可以協助這個。您通過回調鏈中使用它加載了一些常見的庫：

/* 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（http://requirejs.org/）以獲得完整的系統。

來源

2014-02-12 18:34:17 turnt

是的，默認情況下腳本是異步加載的。我爲你寫了一個類似的代碼，並面臨同樣的問題。我的代碼最初是這樣的：

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

發生了什麼事是與應用程序的網頁，必須重新加載，因爲在第一次嘗試的jQuery是加載太晚出於某種原因和用戶界面被打破，由於缺少依賴關係，所以基本上這個頁面只能每隔兩次正確加載。這個問題後，已JS腳本可以通過腳本的異步屬性設置爲false簡單地做我禁用異步加載了：

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

來源

2015-04-18 08:59:29 mac13k

使用javascript將腳本加載到頁面

回答

相關問題