CODEWITHSUNDEEP
javascripthtmldom
Myogeo
Myogeo

Reputation: 53

Call Function from Dynamically loaded Javascript file

I have a base.js file that called from my index.html file and this base.js call script script1.js or script2.js according to parameter passed to the base.js file and then I have another script called editor.js will call a function -with the same name but different implementation- from script1.js or script2.js, so my question is how I execute the function after loading the script1.js or script2.js

Samples of what I mean:

index.html

<html>

<head>
    <meta charset="utf-8">
    <title>Rich Text Editor</title>
    <link rel="stylesheet" type="text/css" href="content/css/app-min.css">
</head>

<body>
    <div class="new-question page">
        <p>
            <textarea id="textBox1" class="html-editor" cols="70" rows="10">
                        </textarea>
        </p>
        <p>
            <button id="submit">Submit</button>
        </p>
    </div>
    <script type="text/javascript" src="base.js"></script>
    <script>
        LoadFunction("multiply");
    </script>
    <script type="text/javascript" src="editor.js"></script>
    <script type="text/javascript" src="content/js/script.js"></script>
    <script type="text/javascript" src="content/js/custom-script.js"></script>
</body>

</html>

base.js

let LoadFunction = function (type) {
    //loading localization script
    let script = document.createElement('script');
    script.type = 'text/javascript';
    document.querySelector('body').appendChild(script );
    if(type == "multiply")
       script.src = `script1.js`
   else
       script.src = `script2.js`
}

script1.js

function Calculate(a,b){
return a*b;
}

script2.js

function Calculate(a,b){
return a+b;
}

editor.js

var result = Calculate(5,9);
console.log(result);

Upvotes: 1

Views: 249

Answers (1)

Ofir Baruch
Ofir Baruch

Reputation: 10346

Consider reading more about Promises https://developer.mozilla.org/he/docs/Web/JavaScript/Reference/Global_Objects/Promise

the following is an example using your code, I don't think it fully do what you're looking for (as I called the loadFunction in the editor.js and not in the main file, but I believe this example + the documentation above will help you get the idea). Good luck :)

base.js

let loadFunction = function (type) {
    //loading localization script
    let script = document.createElement('script');
    script.type = 'text/javascript';
    document.querySelector('body').appendChild(script );
    if(type == "multiply")
       script.src = `script1.js`
   else
       script.src = `script2.js`

  // return a promise
  return new Promise((res, rej) => {
    script.onload = function() {
      res();
    }
    script.onerror = function () {
      rej();
    }
  });
}

editor.js

loadFunction('multiple')
  .then(() => {
    // The script file has been loaded.
    // We can use the function.
    var result = Calculate(5,9);
    console.log(result);
  })
  .catch(() => {
    console.error('Could not load the script file.');
  });
  • Haven't fully tested the code.

Upvotes: 1

Related Questions