0

I need to insert a chunk of HTML (that I have no control over) into a div. The HTML I insert may have script tags that load libraries at the top. Deeper within the HTML there may be script tags with inline script that relies on those libraries.

When my chunk of HTML is inserted, I have found posts on SO that help me get each of the script tags to execute after insertion. However, it appears to me that the deeper inline script tags load too fast, and I have console errors that functions they need are not defined. Because the script tags loading libraries are still loading.

So for example, the main page has

<div id="container"/>

And I have inner HTML for that container that might be like:

<script src="somelibrary.js"/>
<div>
  <script>
    some code that relies on somelibrary.js
  </script>
</div>

How can I ensure <script src="somelibrary.js"/> loads completely before the other script attempts to load? Note that I have no control over the inner HTML I am inserting. (I mean, it's not arbitrary. It comes from an application I understand. But I can't get into it and redesign the HTML chunk it provides.)

I think I can safely assume that all script that loads libraries comes first, and all inline script is within a div (possibly deeper) as in my example.

This was closed for matching a similar question, but no, I do not think it's the same.

I do not know ahead of time what the external libraries will be. I don't know their src, and I don't know any functions or objects defined in them. So I cannot conduct tests on whether things from the external library are defined already.

alex.jordan
  • 296
  • 2
  • 11
  • 1
    Does this answer your question? [Verify External Script Is Loaded](https://stackoverflow.com/questions/9521298/verify-external-script-is-loaded) – Michael Walter Mar 28 '21 at 03:57
  • @MichaelWalter I don't think so. I tried to explain why I think that way with an edit to the post. – alex.jordan Mar 28 '21 at 04:40
  • Then the answer is: no, you can't. It is not possible to force a script to load first. The DOM loads as it loads. As soon the later script-tag is reached, it will be executed. It's just bad designed when someone is inserting scripts and codes and does not make sure, that it can be executed. The problem is on this end, not yours – Michael Walter Mar 28 '21 at 04:48

0 Answers0