Load external javascript file after onload()

javascript html onload

20,703

Solution 1

<script>
function loadJS(src, callback) {
    var s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onreadystatechange = s.onload = function() {
        var state = s.readyState;
        if (!callback.done && (!state || /loaded|complete/.test(state))) {
            callback.done = true;
            callback();
        }
    };
    document.getElementsByTagName('head')[0].appendChild(s);
}
loadJS('/script/script.js', function() { 
    // put your code here to run after script is loaded
});
</script>

I still think its better to load in jQuery and use $.getScript instead as you have lots of goodies there.

Can call this on body load

Solution 2

onload="blabla();"

function blabla()
{
    $.getScript( 'url to your js file', function( data, textStatus, jqxhr ) {
        // do some stuff after script is loaded
    });
}

You can learn more here

Source

Solution 3

If you want to do it without jQuery, use this

function addScript(filename)
{
 var scriptBlock=document.createElement('script')
 scriptBlock.setAttribute("type","text/javascript")
 scriptBlock.setAttribute("src", filename)
 document.getElementsByTagName("head")[0].appendChild(scriptBlock)
}

and call it with <body onload="addScript('myFile.js')". If you have multiple files to load, you could put in a wrapper, that adds all the files you want.

Solution 4

Use $(document).ready() and from this function load javascript. It sounds crazy but can be done. please follow http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

View more solutions

20,703

Author by

Roman Tisch

Updated on February 14, 2020

Comments

Roman Tisch over 4 years
I use this in the head tag:
```
<script src="js/lightbox.js"></script>
```
Is it possible to remove this off the header and load this file with onload()?
```
<body onload="...">...</body>
```
Note: This is not a function, it's an external js file with several functions.

Thanks!