Verify External Script Is Loaded

Question

I m creating a jquery plugin and I want to verify an external script is loaded  This is for an internal web app and I can keep the script name location consistent mysscript js   This is also an ajaxy plugin that can be called on many times on the page    If I can verify the script is not loaded I ll load it using   jQuery getScript     How can I verify the script is loaded because I don t want the same script loaded on the page more than once  Is this something that I shouldn t need to worry about due to caching of the script   Update   I may not have control over who uses this plugin in our organization and may not be able to enforce that the script is not already on the page with or without a specific ID  but the script name will always be in the same place with the same name  I m hoping I can use the name of the script to verify it s actually loaded

User · Answer

Create the script tag with a specific ID and then check if that ID exists?

Alternatively, loop through script tags checking for the script 'src' and make sure those are not already loaded with the same value as the one you want to avoid ?

Edit: following feedback that a code example would be useful:

(function(){
    var desiredSource = 'https://sitename.com/js/script.js';
    var scripts       = document.getElementsByTagName('script');
    var alreadyLoaded = false;

    if(scripts.length){
        for(var scriptIndex in scripts) {
            if(!alreadyLoaded && desiredSource === scripts[scriptIndex].src) {
                alreadyLoaded = true;
            }
        }
    }
    if(!alreadyLoaded){
        // Run your code in this block?
    }
})();

As mentioned in the comments (https://stackoverflow.com/users/1358777/alwin-kesler), this may be an alternative (not benchmarked):

(function(){
    var desiredSource = 'https://sitename.com/js/script.js';
    var scripts = document.getElementsByTagName('script');
    var alreadyLoaded = false;

    for(var scriptIndex in document.scripts) {
        if(!alreadyLoaded && desiredSource === scripts[scriptIndex].src) {
            alreadyLoaded = true;
        }
    }
    if(!alreadyLoaded){
        // Run your code in this block?
    }
})();

User · Answer

Simply check if the global variable is available  if not check again  In order to prevent the maximum callstack being exceeded set a 100ms timeout on the check    function check script loaded glob var        if typeof glob var       undefined            do your thing       else       setTimeout function         check script loaded glob var         100

User · Answer

If the script creates any variables or functions in the global space you can check for their existance   External JS  in global scope  --  var myCustomFlag   true    And to check if this has run   if  typeof window myCustomFlag     undefined           the flag was not found  so the code has not run       getScript   lt external JS gt         Update  You can check for the existence of the  lt script gt  tag in question by selecting all of the  lt script gt  elements and checking their src attributes     get the number of   lt script gt   elements that have the correct  src  attribute var len      script   filter function          return    this  attr  src        lt external JS gt        length     if there are no scripts that match  the load it if  len     0          getScript   lt external JS gt         Or you can just bake this  filter   functionality right into the selector   var len      script src   lt external JS gt      length

User · Answer

Merging several answers from above into an easy to use function   function GetScriptIfNotLoaded scriptLocationAndName      var len      script src       scriptLocationAndName        length       script already loaded    if  len  gt  0        return     var head   document getElementsByTagName  head   0     var script   document createElement  script      script type    text javascript     script src   scriptLocationAndName    head appendChild script

User · Answer

This was very simple now that I realize how to do it  thanks to all the answers for leading me to the solution  I had to abandon   getScript   in order to specify the source of the script   sometimes doing things manually is best    Solution    great suggestion  Jasper var len      script src   Javascript MyScript js     length    if  len     0            alert  script not loaded             loadScript  Javascript MyScript js             if     script src   Javascript MyScript js     length     0                alert  still not loaded                      else               alert  loaded now                        else           alert  script loaded            function loadScript scriptLocationAndName        var head   document getElementsByTagName  head   0       var script   document createElement  script        script type    text javascript       script src   scriptLocationAndName      head appendChild script

User · Answer

Another way to check an external script is loaded or not  you can use data function of jquery and store a validation flag  Example as    if     body   data  google-map                  console log  no js               getScript  https   maps googleapis com maps api js v 3 exp amp sensor false amp callback initilize  function                   body   data  google-map  true                  function                    alert  error while loading script                                        else               console log  js already loaded

User · Answer

jasper s answer is totally correct but with modern browsers  a standard Javascript solution could be   function isScriptLoaded src        return document querySelector  script src      src           true   false

User · Answer

Few too many answers on this one  but I feel it s worth adding this solution  It combines a few different answers   Key points for me were    add an  id tag  so it s easy to find  and not duplicate Use  onload   to wait until the script has finished loading before using it  mounted          First check if the script already exists on the dom      by searching for an id   let id    googleMaps    if document getElementById id      null        let script   document createElement  script       script setAttribute  src    https   maps googleapis com maps api js key     apiKey      script setAttribute  id   id      document body appendChild script           now wait for it to load        script onload        gt               script has loaded  you can now use it safely         alert  thank me later                  do something with the newly loaded script

User · Answer

I think it s better to use window addEventListener  error   to capture the script load error and try to load it again  It s useful when we load scripts from a CDN server  If we can t load script from the CDN  we can load it from our server   window addEventListener  error   function e      if  e target nodeName      SCRIPT         var scriptTag   document createElement  script        scriptTag src   e target src replace  https   static cdn com      our-server static         document head appendChild scriptTag          true

[javascript] Verify External Script Is Loaded

Examples related to javascript

Examples related to jquery

Examples related to asp.net