title: Load JS library from another JS library, and let the page use it
body: <p>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.</p>
  
  <p>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?</p>
  
  <p>This is my code:</p>
  
  <p>file.html:</p>
  
  <pre><code>&lt;script src="../path/to/file1.js"&gt;
  functionFromFile2(); // This doesn't work!
  &lt;/script&gt;
  </code></pre>
  
  <p>file1.js:</p>
  
  <pre><code>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!
  }
  </code></pre>
  
  <p>file2.js</p>
  
  <pre><code>function functionFromFile2() {
    // code...
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>