Problems with dynamic loading in JavaScript -
i javascript newbie , learn working on pure javascript "project" calculates mathematical functions. works well. now, further step, want make messaging multilingual. code should capable of loading appropriate language file @ runtime. dynamic loading issue, read , found solutions on web pages this one.
before writing dynamic code, loaded statically , test code worked well. code asking making minor difference of loading "script" element.
the code run problems this.getstring function, not possible access de element in language file. @ line console.log(eval(language, tag));, error message "uncaught referenceerror: de not defined".
//file: utils/lang/js/fileutils.js function language(language) { var __construct = function(dynamicload) { if (typeof language == 'undefined') { language = "en"; } // load proper language file: loadfile("js/resources/lang.de.js"); return; } () this.getstring = function(tag, strdefault) { console.log("getstring(" + tag + ", " + strdefault + "): "); console.log("getstring(...): document = " + document); console.log("getstring(...): eval(" + language + ", " + tag + ") = "); console.log(eval(language, tag)); var strreturn = eval('eval(language).' + tag); if (typeof strreturn != 'undefined') { return strreturn; } else { return (typeof strdefault != 'undefined') ? strdefault : eval('en.' + tag); } } }
the static test code works not included, can access de element.
my question: how load language file de tag accessible?
thank help!
//file: utils/files/js/fileutils.js function 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); } console.log("loadfile(\"" + filepathname + "\"): document = " + document); } //file: utils/lang/js/resources/lang.de.js: de = { pleasewait: "bitte warten..." }; //file: utils/lang/js/resources/lang.en.js en = { pleasewait: "please wait..." }; //file: utils/lang/js/testlanguage.js: function output() { console.log("output()"); var codes = ['de', 'en']; (var = 0; < codes.length; i++) { var translator = new language(codes[i]); var message = "output(): in " + translator.getlanguage() + ": "; message += translator.getstring('pleasewait'); console.log(message); } }
<!--file: utils/lang/testlang.html:--> <!doctype html> <html> <head> <meta charset="iso-8859-1"> <title>test languages</title> <script type="text/javascript" src="../files/js/fileutils.js"></script> <script type="text/javascript" src="js/language.js"></script> <script type="text/javascript" src="js/testlanguage.js"></script> </head> <body> <button name="outputbutton" onclick="output();">click</button> <br>please press [f12] can see test results. </body> </html>
when add script tag document, not loaded synchronously. need wait file loaded before can use code in it.
you may able redesign code use script.onload callback:
var reference = document.createelement('script'); // ... reference.onload = function() { alert("script loaded , ready"); };
but scenario, if don't have many language string may best load them statically.
Comments
Post a Comment