Check if a jquery has been loaded or not

Given a document, The task is to determine whether JQuery has been loaded or not, If not then load it dynamically using JavaScript. Below are the examples to check:
Approach:

First check if it is loaded.
If not loaded then load it dynamically, create a script element and add properties like(type, src) to it and then finally append it at the end, inside of the head element.

Example 1: In this example, the JQuery is already loaded so message ‘Script already loaded!’ prints on screen.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Check if jquery has been loaded, If not then load. 
    </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </script> 
</head> 
  
<body style="text-align:center;" 
      id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP" 
       style="font-size: 19px;  
              font-weight: bold;"> 
    </p> 
    <button onClick="GFG_Fun()"> 
        click here 
    </button> 
    <p id="GFG_DOWN" 
       style="color: green;  
              font-size: 24px;  
              font-weight: bold;"> 
    </p> 
    <script> 
        var up =  
            document.getElementById('GFG_UP'); 
        var down =  
            document.getElementById('GFG_DOWN'); 
        up.innerHTML =  
          "Click on button to check whether JQuery is loaded"; 
  
        function GFG_Fun() { 
            if (!window.jQuery) { 
                var el = document.createElement('script'); 
                el.type = "text/javascript"; 
                el.src =  
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"; 
                document.getElementsByTagName( 
                  'head')[0].appendChild(el); 
                down.innerHTML = "Script loaded succesfully!"; 
            } else { 
                down.innerHTML = "Script already loaded!"; 
            } 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example 2: The src attribute of script element is changed to sc. In this example, the JQuery is not loaded so message ‘Script loaded succesfully!’ prints on screen after successful loading.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Check if jquery has been loaded, If not then load. 
    </title> 
    <script sc= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </script> 
</head> 
  
<body style="text-align:center;" 
      id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP" 
       style="font-size: 19px;  
              font-weight: bold;"> 
    </p> 
    <button onClick="GFG_Fun()"> 
        click here 
    </button> 
    <p id="GFG_DOWN"
       style="color: green; 
              font-size: 24px; 
              font-weight: bold;"> 
    </p> 
    <script> 
        var up =  
            document.getElementById('GFG_UP'); 
        var down =  
            document.getElementById('GFG_DOWN'); 
        up.innerHTML =  
          "Click on button to check whether JQuery is loaded"; 
  
        function GFG_Fun() { 
            if (!window.jQuery) { 
                var el =  
                    document.createElement('script'); 
                el.type = "text/javascript"; 
                el.src =  
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"; 
                document.getElementsByTagName( 
                  'head')[0].appendChild(el); 
                down.innerHTML = "Script loaded succesfully!"; 
            } else { 
                down.innerHTML = "Script already loaded!"; 
            } 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Recommended Posts: