Load external javascript file after onload()

问题

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!

回答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

回答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

回答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.

回答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

回答5:


var JS = {
  load: function(src, callback) {
    var script = document.createElement('script'),
        loaded;
    script.setAttribute('src', src);
    if (callback) {
      script.onreadystatechange = script.onload = function() {
        if (!loaded) {
          callback();
        }
        loaded = true;
      };
    }
    document.getElementsByTagName('head')[0].appendChild(script);
  }
};

// Example with callback

JS.load("http://www.someawesomedomain.com/some.js", function() {
    //Do your thing.
});

来源：https://stackoverflow.com/questions/21761954/load-external-javascript-file-after-onload

标签

javascript

html

onload