0

I try to load some js files dynamically,for example:

function openInforWindow(){ //check if the InforWinow.js has been loaded or not if(window.InforWindow){ //do the right thing } else { loadJs('xxxxxx/InforWindow.js'); // do the right thing //but here ,the infowindow is not definded yet. } } function loadJs(filename){ var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) }

How to make sure that the vars or functions in the js which is dynamically loaded can be add to the javascript execute environment so I can use them ?

Improve this question
2
  • where are you using the parameter "filename"? "js" should be filename i guess. in the line fileref.setAttribute("src",filename); Commented Oct 30, 2011 at 3:03
  • You still got it wrong,ie it is still inside double quotes which makes it a string not a variable. Commented Oct 30, 2011 at 13:59

3 Answers 3

Reset to default
1

adding a script element isn't a blocking operation, this means that your loadJs method returns immediately when your external script isn't even loaded (nor interpreted). You have to wait for it to load.

function openInforWindow(){ //check if the InforWinow.js has been loaded or not if(window.InforWindow){ //do the right thing } else { var loadHandler = function() { //do stuff with inforWindow }; loadJs('xxxxxx/InforWindow.js', loadHandler); } } function loadJs(filename, handler){ var fileref=document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", "js"); fileref.onreadystatechange = function () { if (this.readyState == 'complete')handler(); }; fileref.onload = handler; if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref); }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

One approach could be to load the script using jQuery's AJAX loader. Example below:

function loadJs(filename, functionToCall){ $.getScript(filename, functionToCall); }

Now, you just need to call loadJs("script.js", callback);, and it will first completely load script.js, and then run callback().

Improve this answer

1 Comment

Of course, you don't really need the loadJs wrapper in this example. Equivalent functionality would be achieved by only using the $.getScript() function.
0

You can dynamically insert a <script/> tag into your document, here is a script that will work in firefox/chrome, you may need a bit of tweaking in IE:

loadJs = function(src) { var script = document.createElement('SCRIPT'); script.setAttribute('src', src); document.getElementsByTagName('HEAD')[0].appendChild(script); }

Then wait for the document.onload event to fire, your window.InforWindow should be loaded at that stage.

document.addEventListener('load', function () { // Your logic that uses window.InforWindow goes here }, false);

Note that IE does the load event listener slightly differently:

document.attachEvent('onload', function() { // Your logic that uses window.InforWindow goes here });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.