Post
Ask Question

Dynamically Load & Check an JS Files

Introduction

 
Since we are all working with client-side programming technologies, we may need to load JavaScript files dynamically sometimes. So we will learn how to do that in this article. 
 
Using the code
 
First of all, we will just create two buttons for testing as follows.
  1. <input type="button" id="loadjs" value="Load Js" onclick="load()" />    
  2. <input type="button" id="chk" value="Check Load Js" onclick="checkLoad()" />   
Once that is added, now it is the time to load the script.
 
Please note that you must include that script file to your solution. Here I am adding the jquery-1.7.2.min.js.
 
Now call the load function.
 
Load function
  1. function load() {    
  2.       var dynaScript = document.createElement("script");    
  3.       dynaScript.id = "dynaJS";    
  4.       dynaScript.language = "javascript";    
  5.       dynaScript.type = "text/javascript";    
  6.       dynaScript.src = "jquery-1.7.2.min.js";    
  7.       document.getElementById("myHead").appendChild(dynaScript);    
  8. }   
Now we can check whether it is loaded or not.
 
checkLoad() function
  1. function checkLoad() {    
  2.     if (!window.jQuery)    
  3.         alert("Not loaded");    
  4.     else    
  5.         alert("Loaded");    
  6. }   
Complete HTML
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head id="myHead">    
  4.     <title>Load JS Files with script tag</title>    
  5.     <script>            
  6.         function load() {    
  7. // script creation start    
  8.             var dynaScript = document.createElement("script");    
  9.             dynaScript.id = "dynaJS";    
  10.             dynaScript.language = "javascript";    
  11.             dynaScript.type = "text/javascript";    
  12.             dynaScript.src = "jquery-1.7.2.min.js";    
  13. // script creation end    
  14.             document.getElementById("myHead").appendChild(dynaScript);    
  15. //Finally add it to our head element here.    
  16.         }    
  17.         function checkLoad() {    
  18.             if (!window.jQuery)    
  19.                 alert("Not loaded");    
  20.             else    
  21.                 alert("Loaded");    
  22.         }    
  23.     </script>    
  24. </head>    
  25. <body>    
  26.     Sibeesh Passion (www.sibeeshpassion.com)    
  27.     <input type="button" id="loadjs" value="Load Js" onclick="load()" />    
  28.     <input type="button" id="chk" value="Check Load Js" onclick="checkLoad()" />    
  29. </body>    
  30. </html>   
Output
 
Now we will run the application and see the output. I have included the output as in the images below.
 
Browser console before loads JS
Figure: Browser console before loads JavaScript
 
After loads JS
Figure: After loads JavaScript
 
When you click the Check Load button, you will get an alert saying that jQuery has been loaded.
 

Conclusion

 
Please provide your valuable suggestions and comments. Thanks in advance.
 
Kindest Regards,


Similar Articles