Load a JavaScript File On The Fly

Load a JavaScript file on demand and execute dependent functions.

function loadFile() {
    // Create a script tag, set its source
    var scriptTag = document.createElement("script"),
        filePath = "/path/to/file.js";

    // And listen to it
    scriptTag.onload = function(loadEvent) {
        // This function is an event handler of the script tag
        handleEvent();
    }

    // Make sure this file actually loads instead of a cached version
    // Add a timestamp onto the URL (i.e. file.js?bust=12345678)
    var cacheBuster = "";

    cacheBuster = "?bust=" + new Date().getTime();

    // Set the type of file and where it can be found
    scriptTag.type = "text/javascript";
    scriptTag.src = filePath + cacheBuster;

    // Finally add it to the <head>
    document.getElementsByTagName("head")[0].appendChild(scriptTag);
}

function handleEvent() {
    console.log('The file has been loaded. Do something else.');
    // More code here
}

// Usage
loadFile();

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Load a JavaScript File On The Fly

My Battle Tested Recommendations

Documentation

Latest Posts