堆棧內存溢出
  簡體   English   中英

使用javascript將腳本加載到頁面

[英]Loading scripts to page using javascript

 原文  2014-02-12 18:29:31  9   4    javascript

問題描述

我創建了一些函數（應該）將其他文件加載到頁面上（我正在創建一個庫，並且希望使所有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>

和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");

問題是：我收到錯誤消息，原因是此站點上的另一個腳本聲稱庫中的函數未定義。 這些文件是否異步加載？ 如果是，如何停止加載頁面直到加載庫？

4 個解決方案

解決方案1
 1 已采納  2014-02-12 18:40:26

我使用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'
    }
});

解決方案2
 0  2014-02-12 18:31:29

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

解決方案3
 0  2014-02-12 18:34:17

我實際上創建了一個可以幫助您解決此問題的系統。 您可以通過回調鏈使用它來加載一些常見的庫： 

/* 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/ ），以獲取完整的系統。

解決方案4
 0  2015-04-18 08:59:29

是的，默認情況下腳本是異步加載的。 我編寫了與您相似的代碼，並遇到了相同的問題。 我的代碼最初看起來像這樣： 

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加載太晚，並且由於缺少依賴項而導致UI損壞，因此基本上該頁面僅第二次正確加載。 我禁用了JS腳本的異步加載后，問題就消失了，只需將腳本的async屬性設置為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);
};

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在每個頁面上加載腳本 直接導航到chrome頁面時未加載Javascript腳本 JavaScript和腳本加載 JavaScript-加載腳本順序 按順序加載JavaScript腳本 在ASPX頁面上使用多個JavaScript腳本 使用 Javascript 加載新頁面 使用Ajax加載頁面的一部分時腳本出現問題 使用Java或任何其他語言加載和執行jquery和javascript腳本 使用jQuery加載腳本
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM