Menu
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.
914
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
Dynamic loading Those files can be loaded asynchronously in JavaScript. To load a JavaScript file dynamically: Create a script element. Set the src , async , and type attributes.
For loading a script file dynamically using JavaScript, the basic steps are: Create the script element. Set the src attribute on the script element to point to the file we want to load. Add the script element to the DOM.
1 - You can load it with an AJAX call then use eval. This is the most straightforward way but it's limited to your domain because of the Javascript safety settings, and using eval is opening the door to bugs and hacks. 2 - Add a script element with the script URL in the HTML.
For adding external JavaScript file, we will be using the src attribute − Let’s see the HTML file first, which will include the source for the external file source. You can try to run the following code to include external JS in HTML. The HTML file is here, with a src to the JS file myscript.js.
Read Also: How to Write Conditional Statements in JavaScript? You can load external Javascript asynchronously either using async or defer attributes or loading external scripts when document finishes loading. Since the defer and async attributes are ways of telling the browser that the linked script does not use the document.write () method.
Advantages of External JavaScript There will be following benefits if a user creates an external javascript: It helps in the reusability of code in more than one HTML file. It allows easy code readability.
An external JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript files into a single file. It increases the speed of the webpage. Let's create an external JavaScript file that prints Hello Javatpoint in a alert dialog box. message.js. function msg () {. alert ("Hello Javatpoint");
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.
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
