Can't access variables from dynamically loaded javascript

Question

I'm using a fairly simple system to load javascript dynamically:

include = function (url) {
  var e = document.createElement("script");
  e.src = url;
  e.type="text/javascript";
  document.getElementsByTagName("head")[0].appendChild(e);
};

Let's say I have a file test.js which has the following contents:

var foo = 4;

Now, in my original script, I want to use

include(test.js);
console.log(foo);

However, I get a 'foo has not been defined' error on this. I'm guessing it has to do with the dynamic script being included as the last child of the <head> tag. How can I get this to work?

David Murdoch · Accepted Answer · 2010-04-29 12:03:53Z

5

It is because you have to wait for the script to load. It is not synchronous like you would think. This may work for you:

include = function (url, fn) {
    var e = document.createElement("script");
    e.onload = fn;
    e.src = url;
    e.async=true;
    document.getElementsByTagName("head")[0].appendChild(e);
};

include("test.js",function(){
    console.log(foo);
});

edited Apr 29, 2010 at 12:03

answered Apr 29, 2010 at 11:47

David Murdoch

89.6k40 gold badges155 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1517108 Over a year ago

Nice simple script. But how can we incorporate failure events (like connection not established, or 404 etc) in this..

Quentin · Accepted Answer · 2010-04-29 11:46:05Z

3

That is one problem, but it also takes time for the browser to download and parse the remote JS file — and it hasn't done that before you call console.log.

You need to delay things until the script has loaded.

This is easiest done by letting a library do the heavy lifting, jQuery has a getScript method that lets you pass a callback to run when the script has loaded.

answered Apr 29, 2010 at 11:46

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Can't access variables from dynamically loaded javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related