how to load javascript dynamically

Question

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 ?

where are you using the parameter "filename"? "js" should be filename i guess. in the line fileref.setAttribute("src",filename); — Birey
– Birey, 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. — Birey
– Birey, Commented Oct 30, 2011 at 13:59

Roman · Accepted Answer · 2011-10-30 03:01:09Z

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);
}

Isaac Lewis · Accepted Answer · 2011-10-30 03:00:06Z

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().

answered Oct 30, 2011 at 3:00

Isaac Lewis

1,1992 gold badges15 silver badges27 bronze badges

1 Comment

Isaac Lewis Over a year ago

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

Steven de Salas · Accepted Answer · 2011-10-30 03:08:50Z

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
});

edited Oct 30, 2011 at 3:08

answered Oct 30, 2011 at 2:58

Steven de Salas

21.6k9 gold badges78 silver badges85 bronze badges

Collectives™ on Stack Overflow

how to load javascript dynamically

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related