CODEWITHSUNDEEP
javascripthtml
VirxEC
VirxEC

Reputation: 1054

Load JS library from another JS library, and let the page use it

For my purposes, I want to be able to load a JavaScript library (file1.js) from the HTML page (file.html) and within file1.js, load file2.js. I then want file2.js's functions to be able to run in file.html without loading it directly from file.html.

Also, file1.js successfully loads from file.html, and file2.js successfully loads from file1.js. However, file2.js's functions can't be accessed in file.html. How would I do this?

This is my code:

file.html:

<script src="../path/to/file1.js">
functionFromFile2(); // This doesn't work!
</script>

file1.js:

var script = document.createElement("script");
script.src = "../path/to/file2.js";
script.onload = script.onreadystatechange = init1;
document.head.appendChild(script);

var init1 = function() {
  functionFromFile2(); // This works!
}

file2.js

function functionFromFile2() {
  // code...
}

How can I get functionFromFile2() working in file.html? Btw, this question is out of context and this setup IS REQUIRED - I can't combine the 2 files. I also don't want to reference file2.js from file.html, because the path of file2.js can change, and both file.html and file1.js use functions from file2.js.

I don't NEED dynamic imports, however, if I can use a dynamic import, then I can keep the single line in file.html, which is the goal, to keep it as just one line. I know that it's not needed in this example, but that's because it's an example and in my actual version it's required.

I require vanilla JavaScript. No libraries, please! I'm sure that there's some kind of library that will do what I want, but I want to keep my project %100 vanilla.

Upvotes: 0

Views: 1451

Answers (2)

Joe S.
Joe S.

Reputation: 21

I think you need to use a custom event. this way you can let your code in the HTML know when your file was loaded in file1.

Link to example code

Example (timeout for simulating file1)

<script type="text/javascript">
  // Pretending to be File1 (Aysnc Stuff)
  (function() {
    function init() {
      console.log('The file loaded, creating an event to let the document know')
      var fileReadyEvent = new CustomEvent('file2ready');
      document.dispatchEvent(fileReadyEvent);
    }
    setTimeout(init, 2000);
  })();
  
</script>

<script type="text/javascript">
  (function() {
    function doStuff() {
      console.log('Im doing stuff');
    }
    document.addEventListener('file2ready', doStuff);
  })();
  
</script>

Note: Custom events are not supported in old internet explorer so a polyfill would be needed to support ancient browsers. Also if you are using jquery it has/had custom events with trigger(), and on().

Upvotes: 0

Thomas Ludewig
Thomas Ludewig

Reputation: 725

Seems you want javascript "includes" :) Which is probably not forseen. But you could come to the idea to fetch the script source by ajax. Write a tiny pre processor which loads other files, combine them whatever. At this moment its just text and then either add a new script object to the dom like you are thinking of or simply evaluate the final string. Which will also make all functions and variables availeable.

                function GetText(url, fkt) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState === 4 && this.status === 200) {
                        return this.responseText;
                    }
                }
                xhttp.open("GET", url, false);
                xhttp.send();
                if (typeof fkt === 'undefined') {
                    return xhttp.responseText;
                } else {
                    return fkt(xhttp.responseText);
                }
            }

this will get you any kind of file in return. You can also add a function to do something with the file inside the script; and now we just do a 

     var src=GetText("../js/script2.js");
     eval(src);

or 

     var dynamicURL ="./js/startrek.js"

     var src=GetText(dynamicURL);
     eval(src);

Note that the scope of the eval can be limited also to objects. As you can see you can change the script location also variable. See also this nice tutorial Dynamic add scripts

Upvotes: 1

Related Questions