In this article, we will learn how to fetch a JavaScript file(.js) and load it in a web browser dynamically by using JavaScript with HTML. We need a web browser i.e., Chrome (recommended) or Electron Application. Sometimes we need to add a script in the document as per the requirement of the user interface which cannot be done on the default page load.
This article is all about fetching a JS file from any jQuery (CDN) link or React file in Document Object Model.
Approach :
- Create a new script element.
let newscript = document.createElement('script');
- Provide the source of the newly created script element.
newscript.src = document.getElementById("source").value;
- Append the element in the DOM head so that it could execute the script.
document.head.appendChild(newscript)
The above approach is implemented below in the example by considering the following file resources as for example scripts that are loaded dynamically.
Resources: You can use this CDN link in the input field to get fetched.
JQuery CDN:
https://code.jquery.com/jquery-3.5.1.js
React CDN :
https://unpkg.com/react@17/umd/react.development.js https://unpkg.com/react-dom@17/umd/react-dom.development.js
Custom Script:
https://graphicalstructure.codes/Geeks.js
Note: We will be using these files. (Users can use any source as per their requirement).
Example: In this example, we will use the above approach.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /></head><body> <input type="text" id="source" style="width: 60%" placeholder="Enter the link of source." /> <button id="loadscript">Fetch and Load!</button> <script> document.getElementById("loadscript") .onclick = function getScript() { let newscript = document.createElement("script"); newscript.src = document .getElementById("source").value; document.head.appendChild(newscript); }; </script></body></html> |
Output: The following output shows the dynamic loading of JavaScript files.
- jQuery CDN:
- Dynamically loading ReactJS :
- loading Custom JS :
Notes:
- Users can use any events on the element to load the script. In this article. “onclick” event has been used.
- Scripts should not contain errors otherwise they may throw errors and may cause the immediate stoppage of code execution.
- Use proper error handling so that the execution of code doesn’t get interrupted if any error occurred while fetching.
- The above implementation is also valid for ElectronJS.