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 loa

Answer 1

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.

Answer 2

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.