Accessing variables after dynamically loading a script

Question

Right up front: this project doesn't use JQuery.

We have some third-party JavaScript; it's big and hairy and doesn't need to be used often, so we're dynamically loading it only when we need to:

function loadBigHairyCode()
{
    var file = document.createElement('script')
    file.setAttribute("type","text/javascript")
    file.setAttribute("src","path/to/big/ugly/script/file.js")
    document.getElementsByTagName("head")[0].appendChild(file)

    magic_needs_to_happen_here
}

The script loading works fine, including some corresponding CSS that's not shown here.

The loaded file defines a constructor function (call it UglyGlobalFunc) which we use elsewhere in the usual way (var foo = new UglyGlobalFunc(....)). The problem is, because the rest of that file is kinda ugly, we need to fix it up a bit so that it sucks less. Specifically, at the point where I've shown "magic needs to happen here" above, I want to write the equivalent of

UglyGlobalFunc.prototype.BodgeBodgeBodge = function() {....}

just as if I were editing the underlying file.

But that fails, because at that point in the code, UglyGlobalFunc is undefined, which makes sense. Same for a simple level of indirection like window.UglyGlobalFunc.proto.... So my questions are:

Are the dynamically loaded contents even accessible at that point of execution (where magic needs to happen)? Or do they not become "real" until after loadBigHairyCode() returns and the browser goes through some kind of refresh cycle?
If yes, then how do I access them? Some kind of getGlobalVariableByName("string") function?
If not, then... aieee. How do normal sane people go about doing that kind of thing?

The Alpha · Accepted Answer · 2012-12-11 21:00:03Z

4

You may try this

function loadBigHairyCode()
{
    var file = document.createElement('script')
    file.onreadystatechange= function () { // works in IE
        if (this.readyState == 'complete') MyFunc();
    }
    file.onload= MyFunc;
    file.type="text/javascript";
    file.src="path/to/big/ugly/script/file.js";
    document.getElementsByTagName("head")[0].appendChild(file)
}

function MyFunc(){
    //....
}

Update: You may read this.

edited Dec 11, 2012 at 21:00

answered Dec 11, 2012 at 20:44

The Alpha

147k30 gold badges294 silver badges313 bronze badges

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

2 Comments

Teemu Over a year ago

Yep, looks better now : ). I'll remove my previous comment, it's irrelevant now.

The Alpha Over a year ago

@Teemu, This way the script doesn't block page loading, called async.

bfavaretto · Accepted Answer · 2012-12-11 20:42:59Z

3

When you create a <script> element like that, you have to bind to its onload event, which is fired as soon as it's loaded and available for use.

Another option is to just use document.write('<script src="..."></script>'); to have it loaded synchronously. Then you can use it in the following line. Just make sure to do that before the page finishes loading, or your whole document will be overwritten.

answered Dec 11, 2012 at 20:42

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

2 Comments

Ti Strga Over a year ago

Oh, I didn't realize that individual script elements could even HAVE their own events like that. (I am not a web guy.) Thanks to everyone who answered!

bfavaretto Over a year ago

@TiStrga <img> elements have that event too (might be useful).

Collectives™ on Stack Overflow

Accessing variables after dynamically loading a script

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related