How to add new script and wait for it to execute in Javascript

Question

Let's say I've got my-file.js or some CDN file in different server that has

for (var i = 0; i < 1000; i ++) {
    //something really long and hard to execute
}
//after this long execution

window.myObj = { 
    //initialization of some global object that I need 
}

(I cannot change my-file.js...)

I want to add my-file.js asynchronously to page, and then, after it is loaded and EXECUTED I want to call some event like:

//when my my-file.js is loaded I finally use window.myObj
window.myObj.somefunc(); //yaaay

Is it possible? (cross browser for IE9+ is important for me, but any not critical)

Note: In case file I need is on CDN or somewhere on different server - I need to remember about cross-domain policy, so I think loading content of file in ajax is not possible in such case.

Note 2: http://www.chromestatus.com/features/5711871906676736 there is exacly what I need, but I bet it'll be few years before you can easly use it globally.

What comprises "and EXECUTED"? It could have timers, AJAX calls etc. Should we also wait for those? Listening for when it loads is possible. When it fully executes is another thing. — Joseph
– Joseph, Commented Sep 11, 2014 at 15:00
In order to wait for execution, there would have to be some callback function call in my-file.js, or a variable update that you could monitor. Is there anything like that? — Jonathan M
– Jonathan M, Commented Sep 11, 2014 at 15:00
Joseph the Dreamer - no, we dont need to wait for all ajax calls. It could be useful in some cases tho. — pie6k
– pie6k, Commented Sep 11, 2014 at 15:02

Joseph · Accepted Answer · 2014-09-11 15:08:23Z

2

var script = document.createElement('script');
script.onload = function(){
  // loaded
}
document.head.appendChild(script);
script.src = "path/to/script";

That's about the simplest example. And yes, the entire thing is async, hence it needed the onload handler.

You could also wrap it up in a function:

function getScript(src,callback){
    var script = document.createElement('script');
    script.onload = callback;
    document.head.appendChild(script);
    script.src = src;
}

getScript('path/to/js',function(){
  //loaded
});

However, thinking out of the box, it sounds like you need dependency management. Use RequireJS. Should fit your needs.

edited Sep 11, 2014 at 15:08

answered Sep 11, 2014 at 15:03

Joseph

120k31 gold badges186 silver badges238 bronze badges

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

3 Comments

pie6k Over a year ago

It waits for script to load, not to execute. If script you're loading takes a while to execute, and you'll try to use globals it create just after your code, it'll fail. Try it with some huge loop.

Calvin Froedge Over a year ago

My example handles that

Joseph Over a year ago

@AdamPietrasiak What you seem to need is dependency management (load and run this before that). Use RequireJS instead.

Calvin Froedge · Accepted Answer · 2014-09-11 15:03:01Z

0

jQuery getScript has a callback you can use to execute events after a file is loaded, or you can use script.onload as in Joseph's example:

http://api.jquery.com/jquery.getscript/

If you want to wait until a certain property is available (ie after some work has finished), you can create an interval and then clear it as soon as the property is found in window, ie:

var waitForObj = setInterval(function(){
  if(window.myObj && window.myObj.somefunc){
    clearInterval(waitForObj);
    //Do some stuff you need this object for
  }
}, 100);

answered Sep 11, 2014 at 15:03

Calvin Froedge

16.4k17 gold badges58 silver badges62 bronze badges

1 Comment

pie6k Over a year ago

It works only on same-domain policy. When you'll try to use it on some cdn without cross-domain allowed -> fail.

Collectives™ on Stack Overflow

How to add new script and wait for it to execute in Javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related