发表新帖
发表新帖

Problems with dynamic loading in JavaScript

后端 未结
关注
3 721
执笔经年
执笔经年 2021-01-05 21:47

I am a JavaScript newbie and learn by working on a pure JavaScript \"project\" that calculates mathematical functions. It all works well. Now, as a further step, I

相关标签:
3条回答
  • 长发绾君心
    2021-01-05 22:11

    When you add the script tag to your document, it is not loaded synchronously. You need to wait for the file to be loaded before you can use the code that was in it.

    you may be able to redesign your code to use a script.onload callback:

    var reference = document.createElement('script');
// ...
reference.onload = function() {
  alert("Script loaded and ready");
};

    but for this scenario, if you don't have many language string you may be best to just load them all statically.

    0 讨论(0)
  • 走了就别回头了
    2021-01-05 22:28

    I found the right answer to my question using the info from GarethOwen. Here are the code modifications I had to do:

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="ISO-8859-1">
		<title>Test languages</title>
		<script type="text/javascript" src="../Arrays/js/ArrayUtils.js"></script>
		<script type="text/javascript" src="../Files/js/FileUtils.js"></script>
		<script type="text/javascript" src="../Logic/js/LogicalUtils.js"></script>
		
		<script type="text/javascript" src="js/LanguageUtils.js"></script>
		<script type="text/javascript" src="js/TestLanguageUtils.js"></script>
	</head>
	<!-- body onload="load(null, '../Maths/js/resources')" -->
	<body onload="load();">
		<button onclick="output();">Click</button><br>
		Please press [F12] so that you can see the test results.
	</body>
</html>

    1. TestLanguage.html: Augmented the body tag

      <body onload="load()">

    2. TestLanguage.js: 2a. Added the load() function requested by the HTML page now:

      var gCodes = ['de', 'en', 'tr'];
function load() {
    console.log("load()");
    for (var i = 0; i < codes.length; i++) {
        new Language(codes[i]);
    }
}

    2b. Using the global gCodes variable also in the output() function

    1. Language.js: To test the whole better, I made the code in the function Language a little bit more elaborate by changing the line in the constructor in function Language(language) to:

        // Load the proper language file:
  if (eval("gLoaded.indexOf('" + language + "') < 0")) {
    loadFile("js/resources/lang." + language + ".js");
    gLoaded[gLoaded.length] = language;
}

    Thank you for your support! :-)

    //Lang/js/Lang.js:
"use strict";

/**
 * Object for multilingual message handling.
 *
 * @param language
 */
function Language(language) {
  var __construct = function(dynamicLoad) {
    if (typeof language == 'undefined') {
      language = "en";
    }
    // Load the proper language file:
    switch (language) {
      case "de":
        loadFile("js/resources/lang.de.js");
        break;
      case "tr":
        loadFile("js/resources/lang.tr.js");
        break;
      default:
        loadFile("js/resources/lang.en.js");
    }
    return;
  }()

  /**
   * Returns the language of that object.
   *
   * @returns The language
   */
  this.getLanguage = function() {
    var strLanguage;

    switch (language) {
      case "de":
        strLanguage = "German";
        break;
      case "tr":
        strLanguage = "Turkish";
        break;
      default:
        strLanguage = "English";
    }
    return strLanguage;
  }

  /**
   * Returns the language code of that object.
   *
   * @returns The language code
   */
  this.getString = function(tag, strDefault) {
    var strReturn = eval('eval(language).' + tag);

    if (typeof strReturn != 'undefined') {
      return strReturn;
    } else {
      return (typeof strDefault != 'undefined') ? strDefault : eval('en.' + tag);
    }
  }
}

//Lang/js/TestLang.js:
"use strict";

var gCodes = ['de', 'en', 'tr'];

function load() {
  console.log("load()");

  for (var i = 0; i < gCodes.length; i++) {
    new Language(gCodes[i]);
  }
}

/**
 * Object for multilingual message handling.
 *
 * @param language
 */
function output() {
    console.log("output()");

    for (var i = 0; i < gCodes.length; i++) {
      var translator = new Language(gCodes[i]);

      var message = "output(): in " + translator.getLanguage() + ": ";

      message += translator.getString('pleaseWait');

      console.log(message);
    }
  }
  //Utils/Files/js/FileUtils.js:
"use strict";

/**
 * Object with file utilities
 *
 * @param filepathname
 */
function loadFile(filepathname) {
  var methodName = "loadFile(" + filepathname + "): "
  var reference = document.createElement('script');

  reference.setAttribute("type", "text/javascript");
  reference.setAttribute("src", filepathname);

  if (typeof reference != 'undefined') {
    document.getElementsByTagName("head")[0].appendChild(reference);
  }

  reference.onload = function() {
    console.log(methodName + "onload(): Language script loaded and ready!");
  }
}

    Here is the console output:

    Here is the output:
load()
loadFile(js/resources/lang.de.js): onload(): Language script loaded and ready!
loadFile(js/resources/lang.en.js): onload(): Language script loaded and ready!
loadFile(js/resources/lang.tr.js): onload(): Language script loaded and ready!
output()
output(): in German: Bitte warten...
output(): in English: Please wait...
output(): in Turkish: Lütfen bekleyiniz...
loadFile(js/resources/lang.de.js): onload(): Language script loaded and ready!
loadFile(js/resources/lang.en.js): onload(): Language script loaded and ready!
loadFile(js/resources/lang.tr.js): onload(): Language script loaded and ready!
    0 讨论(0)
  • 孤城傲影
    2021-01-05 22:30

    How to dynamically load a script file (the most basic version, also there are multiple options to this):

       function loadScriptFile(scriptPath, jsFile, callBack)
   {
       var scriptTag = document.createElement("script"); //creates a HTML script element
       scriptTag.language = "JavaScript"; //sets the language attribute
       scriptTag.type = "text/javascript";
       scriptTag.src = scriptPath + jsFile + ".js"; //the source
       if (callBack)
       {
            scriptTag.onload = callback; //when loaded execute call back
       }
       var scriptTagParent = document.getElementsByTagName("script")[0];
       if (scriptTagParent)
       {
                scriptTagParent.parentNode.insertBefore(scriptTag, scriptTagParent);
       }
       else
       {
           document.body.appendChild(scriptTag);
       }
    }

    How it works:

    Run loadScriptFile("scripts", "math", startProgram). The first two arguments will point to your file and folder. The last argument is a callback function. When defined this will be executed once the script tag has finished loading and the script is available in the global scope. The script will be dynamically added to your page. If there is a script element present on the page, this will be added before that (to keep the mark up nice). If not it will be appended to the body. (this is only visual).

    The callback part is the most interesting. Since your script will now be asynchronical, you'll need to use callback to tell your program that the necessary files are loaded. This callback is fired when the script file is loaded, so you won't get script errors.

    Just a basic example of what I meant in my comment:

    This is not an answer to your question, it's an alternative way (I think it's better to manage). Pure Javascript (with help of XML)

    XML-file: language.xml Basic XML structure: 

    <language>
    <l1033 name="english" tag="en-US">
        <id1000>
            <![CDATA[
                Hello World!
            ]]>
        </id1000>
    </l1033>
    <l1031 name="german" tag="de-DE">
        <id1000>
            <![CDATA[
                Hallo Welt!
            ]]>
        </id1000>
    </l1031>
</language>

    What did I do:
    I constructed a root element called language. Within that wrote two language strings called l1033 for English and l1031 for German. Note that a letter is prepended before the language code. XML will throw an error when a tag starts with a digit. a CDATA block is used to prevent any problems with special characters.

    Now the loading will be done by AJAX:

    var xmlLoader = new XMLHttpRequest();
xmlLoader.onreadystatechange = trackRequest; //event to track the request, with call back
xmlLoader.open("get", "language.xml", true); //set asynchronous to true
xmlLoader.send(null);

function trackRequest()
{
   if (this.status == 200 && this.readyState == 4) //all is good
   {
      globalLanguageFile = this.responseXML;
      startProgram(); //fictive function that starts your program
   }
}

    Now the XML is loaded. How to load strings from it?

    function loadLanguageString(code, id, fallback)
{
    var word = fallback;  
    if (globalLanguageFile.getElementsByTagName("l"+code).length > 0)
    {
        if (globalLanguageFile.getElementsByTagName("l"+code).[0].getElementsByTagName("id"+id).length > 0)
        {
            //found the correct language tag and id tag. Now retrieve the content with textContent.
            word = globalLanguageFile.getElementsByTagName("l"+code).[0].getElementsByTagName("id"+id)[0].textContent;
        }
    }

    return word; //when failed return fall back string
}

    How to call the function:

    loadLanguageString(1031, 1000, "Hello World!");
    0 讨论(0)
 看不清?
提交回复
热议问题