The question is how to rewrite a static HTML script embedding:
<script async id="__script__id__"
type="text/javascript"
src="//abc.xyz.com/js/script.js">
</script>
into a programmatic embedding which allows loading the script only on a certain condition.
The bounty is set for a description of how static/programmatic embedding differ from one another, specifically:
src attribute and preloads them) with authoritative references.If you've already figured out how to detect your criteria then loading another script goes like this:
<head>
<!-- the usual head stuff goes here -->
<script>
// replace `criteria` with your actual criteria
if(criteria) {
const script = document.createElement('script');
script.id = '__script__id__';
script.type = 'text/javascript';
script.async = true;
script.src = '//abc.xyz.com/js/script.js';
document.head.append(script);
}
</script>
<!-- remaining scripts go here -->
<!-- injected script will end up here -->
</head>
Check for the criteria, create the element, set its properties, add it to the document.
I took a shot at finding details on this mechanism. The best I could find was from MDN on the topic of script element async and defer properties:
The exact processing details for these attributes are complex, involving many different aspects of HTML, and therefore are scattered throughout the specification. These algorithms describe the core ideas, but they rely on the parsing rules for
<script>start and end tags in HTML, in foreign content, and in XML; the rules for thedocument.write()method; the handling of scripting; and so on.
Unfortunately, I do not have the necessary familiarity with W3's various HTML specs to turn it into plain English and it looks like it would take quite a bit of time to become that familiar.