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

"I would like to load exactly two scripts before I add the next code in the same js file" - Can you please re-phrase your statement? — James Poulose
– James Poulose, Commented Feb 8, 2017 at 23:00
Why someone lowers rate my topic? I tried a lot of combination to get the correct result.. Is possible load more than one script before next js code? — Zic
– Zic, Commented Feb 8, 2017 at 23:03
Not sure I understand but why not load the scripts twice (by creating 2 script tags and populating) then add your code into another JS file and load that in the same way so you end up loading 3 scripts dynamically. — webnoob
– webnoob, Commented Feb 8, 2017 at 23:31
again: if you need to wait for a script, do not use async for that script. The async attribute is for when you explicitly do not want to wait for it to finish loading before moving on to the next thing. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Feb 9, 2017 at 0:10
Nothing is lightened: you see the page faster, but the total zero-to-all-data-transfered-parsed-and-active is exactly the same, so the price you pay for your users only seeing the page earlier than before is that (a) your users get to interact with with your pages before they are "really done" (there may be some, or even lots of missing functionality) and (b) you are no longer guaranteed any order of events, so if you wanted to "wait for 2 scripts before running script 3", using async complete destroys any ability to do that. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Feb 9, 2017 at 3:51

Zic · Accepted Answer · 2017-02-11 23:43:04Z

3

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!

edited Feb 11, 2017 at 23:43

answered Feb 10, 2017 at 9:47

Zic

831 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leo Over a year ago

The nonce attribute seems to be used out of context here. See stackoverflow.com/questions/42922784/…

James Poulose · Accepted Answer · 2017-02-08 23:14:09Z

1

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);

answered Feb 8, 2017 at 23:14

James Poulose

3,8633 gold badges37 silver badges43 bronze badges

1 Comment

Zic Over a year ago

sure, you right. I've already corrected but still I don't know how join two scripts at once (before yourCodeToBeCalled function) e.g 'first url: js/jquery-3_1_1.min.js & (next script) second url: js/test.js'

webnoob · Accepted Answer · 2017-02-09 00:19:15Z

1

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).

edited Feb 9, 2017 at 0:19

answered Feb 8, 2017 at 23:35

webnoob

16k13 gold badges87 silver badges169 bronze badges

5 Comments

Zic Over a year ago

You are so close to solving my problem. I would like to add script in the bottom of body tag, not in head tag like in your case: getElementsByTagName('head'). if I add two times loadJS() then I would like in first call case without callback. That callback function() {} can be optional?

webnoob Over a year ago

Do you even need the callbacks? Can't you just run your code after the loadJS calls?

Zic Over a year ago

Yes you can but I would like to run code (which is below loadJS func) after adding & executing these dynamically scripts. Of course if we can do that :P now I see that you edited your post. So can I remove: scriptTag.onload = implementationCode; and scriptTag.onreadystatechange = implementationCode; from my func?

Zic Over a year ago

Here is my_website and I use your solution. Current problem is with execution first added script. If you can look at on console/debuger and tell me why jquery not work :(

webnoob Over a year ago

I'm just about to head out so can't look right now but will look when I get a moment. Just out of interest, why are you trying to load these scripts dynamically? Why not load them at the bottom of the body tag manually?

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related