Synchronously load and evaluate a dynamically generated script in JavaScript

Question

I'd like to synchronously load and evaluate a script from a third-party. This works fine:

<head> <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script> <script type="text/javascript"> // This prints 'exists' as expected console.log(typeof jQuery === "function" ? 'exists' : 'not yet'); </script> </head>

But, how would you do this if the src URL is dynamically built and can't be hard-coded? This doesn't work:

<head> <script type="text/javascript"> // Build the URL here const src = 'https://unpkg.com/[email protected]/dist/jquery.js'; // Create the script tag const s = document.createElement('script'); s.setAttribute('src', src); document.head.appendChild(s); </script> <script type="text/javascript"> // This prints 'not yet' console.log(typeof jQuery === "function" ? 'exists' : 'not yet'); </script> </head>

I guess, document.write could do the trick. But, this seems like a bad idea.

What would you recommend?

In my real use case, I need to load the utag.sync.js script:

<script src="https://tags.tiqcdn.com/utag/[account]/[profile]/[env]/utag.sync.js"></script>

env is the dynamic part that is determined based on location.hostname.

It won't work because it takes time to load the script, and by then your console already have a "not yet". Give it a callback and do s.onload = callback. — Gerardo Furtado
– Gerardo Furtado, Commented Oct 2, 2019 at 5:19
what part of const src = 'https://unpkg.com/[email protected]/dist/jquery.js'; is the dynamically built one? What's the actual problem? What are you trying to build? — Thomas
– Thomas, Commented Oct 2, 2019 at 5:31
To me, this feels like it's supposed to be done in the backend. At least I'd build that url in the backend. — Thomas
– Thomas, Commented Oct 2, 2019 at 6:01

Gerardo Furtado · Accepted Answer · 2019-10-02 05:22:56Z

Your script load is asynchronous because of the time it takes to download the remote file. So, if you want to know if your script has finished loading, you can attach a "load" event listener on your script element (s in your example).

<head> <script type="text/javascript"> // Build the URL here const src = 'https://unpkg.com/[email protected]/dist/jquery.js'; // Create the script tag const s = document.createElement('script'); s.addEventListener('load', function() { // This prints 'exists' console.log(typeof jQuery === "function" ? 'exists' : 'not yet'); }); s.setAttribute('src', src); document.head.appendChild(s); </script> <script type="text/javascript"> // This prints 'not yet' console.log(typeof jQuery === "function" ? 'exists' : 'not yet'); </script> </head>

In my real use case, I want to make sure that the body is rendered after the script finished loading. This is the official recommendation: community.tealiumiq.com/t5/iQ-Tag-Management/…
The doc assumes you load your script directly, not via javascript. In your example you could either build the src url dynamically on your server, or hide the page until the script has finished loading.
Yeah, building it on the server makes the most sense. Thanks!

Collectives™ on Stack Overflow

Synchronously load and evaluate a dynamically generated script in JavaScript

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related