admin管理员组

文章数量:1134248

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.

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.

• javascript
• jquery
• asp.net

Share Improve this question Follow asked Mar 1, 2012 at 17:48 AGoodDisplayNameAGoodDisplayName 5,65388 gold badges3737 silver badges5050 bronze badges 1

• 1 This thread is in top of the SO jquery tags FAQ and has a huge variety of methods to check for exisitng script stackoverflow.com/questions/1014203/… Lots of feedback on various methods – charlietfl Commented Mar 1, 2012 at 17:57

Add a comment  | 

13 Answers 13

Sorted by: Reset to default 143

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('<external JS>');
}

Update

You can check for the existence of the <script> tag in question by selecting all of the <script> elements and checking their src attributes:

//get the number of `<script>` elements that have the correct `src` attribute
var len = $('script').filter(function () {
    return ($(this).attr('src') == '<external JS>');
}).length;

//if there are no scripts that match, the load it
if (len === 0) {
    $.getScript('<external JS>');
}

Or you can just bake this .filter() functionality right into the selector:

var len = $('script[src="<external JS>"]').length;

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'
     let script = null
     if(document.getElementById(id)) {
       // Remove the script tag if it already exists
       document.getElementById(id).remove()
     } else {
       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 = () => {
         // script has loaded, you can now use it safely
         alert('thank me later')
         // ... do something with the newly loaded script
     }
  }
  

For clarity I've added a simple check at the beginning to see if the script already exists, and then remove it if it does. You can choose to leave it depending on your environment, and requirements.

I've found that leaving the existing script can, in some cases, lead to a situation where sometimes it's loaded (by the time your script runs), and sometimes it isn't... but waiting for a script to "onload" that has already loaded is an impossible task.

@jasper's answer is totally correct but with modern browsers, a standard Javascript solution could be:

function isScriptLoaded(src)
{
    return Boolean(document.querySelector('script[src="' + src + '"]'));
}

UPDATE July 2021:

The accepted solutions above have changed & improved much over time. The scope of my previous answer above was only to detect if the script was inserted in the document to load (and not whether the script has actually finished loading).

To detect if the script has already loaded, I use the following method (in general):

1. Create a common library function to dynamically load all scripts.
2. Before loading, it uses the isScriptLoaded(src) function above to check whether the script has already been added (say, by another module).
3. I use something like the following loadScript() function to load the script that uses callback functions to inform the calling modules if the script finished loading successfully.
4. I also use additional logic to retry when script loading fails (in case of temporary network issues).
   1. Retry is done by removing the <script> tag from the body and adding it again.
   2. If it still fails to load after configured number of retries, the <script> tag is removed from the body.
   3. I have removed that logic from the following code for simplicity. It should be easy to add.

/** 
 * Mark/store the script as fully loaded in a global variable.
 * @param src URL of the script
 */
function markScriptFullyLoaded(src) {
    window.scriptLoadMap[src] = true;
}

/** 
 * Returns true if the script has been added to the page
 * @param src URL of the script
 */
function isScriptAdded(src) {
    return Boolean(document.querySelector('script[src="' + src + '"]'));
}

/** 
 * Returns true if the script has been fully loaded
 * @param src URL of the script
 */
function isScriptFullyLoaded(src) {
    return src in window.scriptLoadMap && window.scriptLoadMap[src];
}

/** 
 * Load a script. 
 * @param src URL of the script
 * @param onLoadCallback Callback function when the script is fully loaded
 * @param onLoadErrorCallback Callback function when the script fails to load
 * @param retryCount How many times retry laoding the script? (Not implimented here. Logic goes into js.onerror function)
 */
function loadScript(src, onLoadCallback, onLoadErrorCallback, retryCount) {
    if (!src) return;
    
    // Check if the script is already loaded
    if ( isScriptAdded(src) )
    {
        // If script already loaded successfully, trigger the callback function
        if (isScriptFullyLoaded(src)) onLoadCallback();
        
        console.warn("Script already loaded. Skipping: ", src);
        return;
    }

    // Loading the script...
    const js = document.createElement('script');
    js.setAttribute("async", "");
    js.src = src;
    
    js.onload = () => {
        markScriptFullyLoaded(src)
        
        // Optional callback on script load
        if (onLoadCallback) onLoadCallback();
    };
    
    js.onerror = () => {
        // Remove the script node (to be able to try again later)
        const js2 = document.querySelector('script[src="' + src +'"]');
        js2.parentNode.removeChild(js2);
        
        // Optional callback on script load failure
        if (onLoadErrorCallback) onLoadErrorCallback();
    };

    document.head.appendChild(js);
}

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);
}

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?
    }
})();

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)
    }
}

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&sensor=false&callback=initilize",function(){
            $("body").data("google-map",true);

            },function(){
                alert("error while loading script");
            });
        }
    }
    else
    {
        console.log("js already loaded");
    }

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);

Some answers on this page are wrong. They check for the existence of the <script> tag - but that is not enough. That tells you that the tag was inserted into the DOM, not that the script is finished loading.

I assume from the question that there are two parts: the code that inserts the script, and the code that checks whether the script has loaded.

The code that dynamically inserts the script:

let tag    = document.createElement('script');
tag.type   = 'text/javascript';
tag.id     = 'foo';
tag.src    = 'https://cdn.example.com/foo.min.js';
tag.onload = () => tag.setAttribute('data-loaded', true);   // magic sauce
document.body.appendChild(tag);

Some other code, that checks whether the script has loaded:

let script   = document.getElementById('foo');
let isLoaded = script && script.getAttribute('data-loaded') === 'true';
console.log(isLoaded);     // true

If the both of those things (inserting and checking) are in the same code block, then you could simplify the above:

tag.onload = () => console.log('loaded');

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 > 0)
      return;

  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = scriptLocationAndName;
  head.appendChild(script);
}

My idea is to listen for the error event if there is an error on script loading.

const checkSegmentBlocked = (e) => {
  if (e.target.nodeName === 'SCRIPT' && e.target.src.includes('analytics.min.js')) {
      window.isSegmentBlocked = true;
      e.target.removeEventListener(e.type, checkSegmentBlocked);
  }
};
window.addEventListener('error', checkSegmentBlocked, true);
    

Just create an unnecessary constant with a boolean for example in the script to check ex. : const MY_SCRIPT = true;

Then if you want to check if the script is already loaded you do a test with typeof ex. : typeof MY_SCRIPT -> returns 'undefined' if the script is not loaded, otherwise returns 'boolean' if the script is already loaded.

Because for example $.getScript('JS/My_script.js); does not add the script to the DOM.

This is a trick I found to suit my needs and not call up the script over and over again.

I recommend using useScript hook from usehooks-ts. Example below:

const status = useScript(`https://path.to.your.script.js`, {
   removeOnUnmount: false,
});

useEffect(() => {
  if (status === "ready") {
    //do your stuff related to loaded script
  }
}, [status]);

本文标签： javascriptVerify External Script Is LoadedStack Overflow