html - Programmatically referencing a javascript file at runtime -
i having problem programatically referencing javascript file javascript file. reference in html page can't in case directory location of file available @ runtime. have checked out several posts on topic of yet have been unable find works. below code snippets 4 files:
index.html assigns id header tag , references first of 2 javascript files called scriptfile.js.
scriptfile.js, global data file new users.
a second file, called scriptfile.js, user specific data file created each user @ runtime. second javascript file contains data specific single user, located in different directory index.html scriptfile.js, otherwise structurally identical first scriptfile.js. in both cases files consist of function returning array object.
the last file index.js. purpose programmatically reference second scriptfile.js file identified above.
when index.js runs, value scripts.length = 2 supposed be. scripts[0].getattribute('id') , scripts[0].getattribute('src') both output correctly. however, while scripts[1].getattribute('id') outputs correctly id = "scriptoneid", scripts[1].getattribute('src') outputs null incorrect. second problem data scriptoneid.enabled property outputs true, when should outputing false. tells me object = loaddata() statement referencing data index.html scriptfile.js , not index.js usernumber/scriptfile.js. has been verified in testing.
here code snippets. suggestions or ideas on how correct appreciated. thanks...
// 1. index.html page <head id="headid"> <script id="scriptzeroid" type="text/javascript" src="scriptfile.js"> </script> // 2. scriptfile.js function loaddata() { var object = [{ property: 0, enabled: true }]; return object; }; // 3. usernumber/scriptfile.js function loaddata() { var object = [{ property: 0, enabled: false }]; return object; }; // 4. index.js page //global declarations , assignments var object = new array; object = loaddata(); // assign data in loaddata function object array // local declarations , assignments var head = document.getelementbyid("headid"); var script = document.createelement("script"); var usernumber = sessionstorage.getitem("usernumber"); var scriptpath = usernumber + "/scriptfile.js"; script.id = "scriptoneid"; script.type = "text/javascript"; script.scr = scriptpath; head.appendchild( script ); var scripts = document.getelementsbytagname("script"); console.log("script: " + scripts.length); // output = 2 (var = 0; < scripts.length; i++) { console.log("output: " + scripts[i].getattribute('id') + " / " + scripts[i].getattribute('src')); // output scripts[0]: id = "scriptzeroid", scr = "scriptfile.js" // output scripts[1]: id = "scriptoneid", scr = null }; object = loaddata(); // assign data in loaddata function object array console.log("print test value: " + object[1].enabled ); // output = true // incorrect, should = false
your issue script load time problem. in other words it's asynchronous problem.
javascript these days fast. fast. script gets last call "loaddata" long before script injected head gets loaded. therefore accessing original version of "loaddata" twice.
just clarify comment on "notification". add function (as example) index.js file:
function populateobj() { object = loaddata(); } then @ bottom of injected script add:
populateobj(); that's there it. when injected script finishes loading , executed "object" global variable have correct data in it.
Comments
Post a Comment