Can I use JavaScript to change the JavaScript files a HTML document accesses? -
i trying write html page asks users series of questions. answers these questions evaluated javascript code , used determine additional javascript file user needs access. code adds additional javascript file head tag of html page. don't want merge code single javascript file because these additional files large enough nightmare if they're together, , don't want add them head when page first loads because have many variable conflicts. i'm reluctant redirect new webpage each dictionary because make lot of redundant coding. i'm not using libraries.
i begin following html code:
<head> <link rel="stylesheet" type="text/css" href="main.css"> <script src="firstsheet.js" type="text/javascript"></script> </head> //lots of html. <div id="mainusermenu"> </div> and have following javascript function:
function thirdlevelquestions(secondlevelanswer) { //code here calculate variables. part works. activedictionary = firstkey + secondkey + '.js'; //changing html header load correct dictionary. document.head.innerhtml = '<link rel="stylesheet" type="text/css" href="main.css"><script src="' + activedictionary + '" type="text/javascript"></script><script src="firstsheet.js" type="text/javascript"></script>'; //for loop generate next level of buttons. (var = 0; < availableoptions.length; i++) { document.getelementbyid('mainusermenu').innerhtml += '<button onclick="fourthlevelquestions(' + + ')">' + availableoptions[i] + '</button>'; } }
this creates buttons want, , when inspect head element can see both javascript files there. when click on of buttons @ level should call function in second file. instead chrome tells me "uncaught referenceerror: fourthlevelquestions not defined" (html:1). if paste code firstsheet.js function works, assume problem html document not accessing activedictionary file. there way this?
what can done
you trying load javascript on demand. has been thought out problem lately , of native solutions didn't work across bowser implementations. check study here different solutions , background of problem explained well.
for case of large web applications solution use javascript library helped modularising code , loading them on demand using script loaders. focus on modularizing code , not in script loading. check libraries here. there heavier ones includes architectures mvc them.
if use ajax implementation of jquery correct datatype jquery evaluate scripts, famous handling browser differences. can take @ exclusive getscript() indeed shorthand ajax datatype script. keep in mind loading script native ajax not guarantee evaluation of javascript included, jquery doing evaluation internally during processing stage.
what wrong
what have done above might work in modern browsers (not sure), there essential flaw in code. adding script tags head using innerhtml inserts lines html. if browser loads script takes network delay time , call asynchronous loading, cannot use script right away. do? use script when ready or loaded. surprisingly have event that, use it. can like:
var head= document.getelementsbytagname('head')[0]; var script= document.createelement('script'); script.type= 'text/javascript'; script.onreadystatechange= function () { if (this.readystate == 'complete') helper(); } script.onload= helper; script.src= 'helper.js'; head.appendchild(script); check this article implementation without using external libraries
from variable name activedictionary if guess loading data sets opposed javascript programs, should try looking json , loading , using them dynamically.
if this question/answer satisfies needs, should delete question avoid duplicate entries in so.
Comments
Post a Comment