CODEWITHSUNDEEP
javascriptonload
Jonathan
Jonathan

Reputation: 6537

How to know once a dynamically added script is parsed/loaded/executed?

I am trying to dynamically load a JavaScript file and, once it is loaded, run a function that is inside the file. In my main HTML, I basically have:

function load_javascript(js_file)
{
    function load_js_callback(example)
    {
        console.log("function " + function_in_js_file + " is " + typeof(function_name));
        if (typeof(function_in_js_file) == "undefined")
        {
            window.setTimeout(load_js_callback(example), 500);
            return false;
        }
        function_in_js_file(example);
    }

    var jstag = document.createElement("script");
    document.head.appendChild(jstag);

    // Browsers:
    jstag.onload=load_js_callback("example");
    // Internet Explorer:
    jstag.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            load_js_callback("example");
        }
    }
    jstag.setAttribute('src',js_file);
}

load_javascript("/js/example.js");

From what I can find on the internet (https://stackoverflow.com/a/3248500 and https://stackoverflow.com/a/16231055) this should work, but the jstag.onload runs before the function_in_js_file is defined, so I need the window.setTimeout to check again until the function is defined.

Ideally, I would like to get rid of that timeout. Is there any way to know when the file has been completed loaded/parsed/executed (I'm not sure which is the right term) and the function is defined, ideally without changing the dynamic file? I have also tried putting the document.head.appendChild(jstag); after the jstag.setAttribute, but with the same results.

Upvotes: 2

Views: 1117

Answers (3)

Adam Kewley
Adam Kewley

Reputation: 1234

The reason it's running before the script loads is because:

var jstag = document.createElement("script");
document.head.appendChild(jstag);

// Browsers:
jstag.onload=load_js_callback("example");

Is assigning the return value of load_js_callback to jstag.onload. The onload handler wants a function:

var jstag = document.createElement("script");
document.head.appendChild(jstag);

// Browsers:
jstag.onload=function() { load_js_callback("example"); };

As pointed out in the other comments, all this guarantees is that the browser has downloaded the script.

Upvotes: 2

coockoo
coockoo

Reputation: 2382

Consider using DOMContentLoaded js event

document.addEventListener('DOMContentLoader', function () {
    load_javascript("/js/example.js"); // Or what else you want to do
    // HERE I'm confident that my webpage is loaded and my js files too.
})

Upvotes: 0

Lalit Sachdeva
Lalit Sachdeva

Reputation: 6619

try this define a function called

function loadScript(sScriptSrc, oCallback) {
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sScriptSrc;
    // most browsers
    oScript.onload = oCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function () {
        if (this.readyState == 'complete') {
            oCallback();
        }
    }
    oHead.appendChild(oScript);
}

and then call your script file and function inside it via callback

    loadScript("/js/example.js", function () {
                //call function
function_in_js_file(example);
            });

Upvotes: 0

Related Questions