As per this codepen example: https://codepen.io/MichaelHeyDonny/pen/abVWzBQ?editors=1011. A <script> tag is injected into the DOM with a click and a method it contains is called straight after. However as <script> tags are not render-blocking when added dynamically, the method is undefined on the first call. Following clicks will work as the script has now been loaded. Adding async=false to the script tag doesn't appear to have any effect.

Is there any way to modify the <script> tags to ensure they ARE render blocking when added dynamically? I'm aware of other approaches such as using document.createElement like in this example: https://codepen.io/MichaelHeyDonny/pen/VwrbLNy?editors=1011 but was wondering if there's a more straight forward way?

The reason for this is we are looking to move our JS files to a CDN and have run into this issue. Previously when the JS files were on the same server, we didn't have any such problems.

CodePudding user response：