javascript - adding two script tags (in body) before continue another code from same js file

Question

How do I modify the below code? I would like to load exactly two scripts before adding next code from function yourCodeToBeCalled. Can someone give a hint for a beginner? I gave my suggestions after comment //.

var loadJS = function(url, implementationCode){//url, url_Next
    //url is URL of external file, implementationCode is the code
    //to be called from the file, location is the location to 
    //insert the <script> element

    var scriptTag = document.createElement('script');//will add scriptTag_Next
    scriptTag.type = 'text/javascript';
    scriptTag.setAttribute('nonce','22os9h3sdfa');
    scriptTag.src = url;

    scriptTag.onload = implementationCode;//Will It be work? -> scriptTag.onload = scriptTag_Next = implementationCode;
    scriptTag.onreadystatechange = implementationCode;//like as above scriptTag_Next.onreadystatechange ??

    document.body.appendChild(scriptTag);
};
var yourCodeToBeCalled = function(){
    console.log('okay'); } loadJS('js/jquery-3_1_1.min.js', yourCodeToBeCalled);//My my suggestion loadJS('js/jquery-3_1_1.min.js', 'js/test.js' yourCodeToBeCalled)

Original code I borrowed from: link

Answer 1

OK, I found a way to execute scripts one by one. There are no longer errors due to incorrect order of loading scripts, for example: The lack of jQuery framework when next script uses the command of jQuery.. So I decided to use promises for that case.

var loadJS = function(url) { /*url is URL of external file*/
    return new Promise(function(resolve, reject) {
        var scriptTag = document.createElement('script');
        scriptTag.type = 'text/javascript';
        scriptTag.setAttribute('nonce', '22os9h3sdfa');
        scriptTag.onload = resolve;
        scriptTag.onerror = reject;
        scriptTag.src = url;
        document.body.appendChild(scriptTag);
    });
};

loadJS('js/jquery-3_1_1.min.js').then(() => { return loadJS('js/library.js'); }).then(() => {

    var $ = jQuery.noConflict();//jQuery.noConflict();
});

Now 'jquery-3_1_1.min.js' is executed after 'library.js' etc.

Greetings!

Answer 2

I am not sure why you are adding the script element to the location element. Instead of

location.appendChild(scriptTag);

you may want to try

document.body.appendChild(scriptTag);

Answer 3

Assuming I understand your requirements correctly, loadJS is a function, so just call it twice, then call your code:

(function() {
  var head = document.getElementsByTagName('head')
  loadJS('somescript.js', function() { console.log('on load') }, head)
  loadJS('somescript2.js', function() { console.log('on load2') }, head)

  // This is your code to execute once the scripts have loaded.
  console.log('Okay');
})();

Also, you'll want to remove the scriptTag.async = true; line from loadJS so it forces it to wait until it's loaded before continuing execution.

Edit: In line with your most recent change, you can omit the middle param (the callback), it won't be needed.

EDIT: Given your latest changes, this code should work:

(function() {
  loadJS('somescript.js')
  loadJS('somescript2.js')

  // This is your code to execute once the scripts have loaded.
  console.log('Okay');
})();

Now you have document.body.appendChild in loadJS, you don't need the element passed through. Also, you don't need to use a callback, just call your code after the 2 loadJS calls (assuming you've removed the async property).