How can I know if a javascript file has already been included in a top-level page?

Question

I have a user control (ascx), in this user control I wanna use a .js file.

So I include on top of it.

On the other hand, sometimes I use this user control in a webpage that this script has already been loaded on it before.

How can I make a declaration and make it actual only if the page doesn't contain another tag for this script?

Answer 1

use something like the following:

if(typeof myObjectOrFunctionDecalredInThisScript != 'undefined') {
  // code goes here
  var myObjectOrFunctionDecalredInThisScript = { };
}

This tests if your object or function already exists and thus prevents redeclaration.

Answer 2

You can do one of two things client side...

1. Check the dom for the script tag corresponding to the javascript file your want to check
2. Test a variable or function you know has/will be defined within the javascript file for undefined.

Here's a quick (and untested) JS function which uses JQuery to do what you need:

function requireOnce(url) {    
    if (!$("script[scr='" + url + "']").length) {
     $('head').append("<script type='text/javascript' src='" + url + "'></script>"); 
    }
}

Answer 3

As you are using asp.net, it makes sense to do the check server-side as that will be where you choose to add the reference to the javascript file. From your .ascx file you could register with the following:

this.Page.ClientScript.RegisterClientScriptInclude("GlobalUnqiueKey", UrlOfJavascriptFile);

... from your page you just call the ClientScript object directly:

ClientScript.RegisterClientScriptInclude("GlobalUnqiueKey", UrlOfJavascriptFile);

The 'GlobalUniqueKey' can be any string (I use the url of the javascript file for this too)

If you try to register a script with the same key string, it doesn't do anything. So if you call this in your page, your control or anywhere else, you'll end up with only one reference in your page. The benefit of this is that you can have multiple instances of a control on a page and even though they all try to register the same script, it is only ever done a maximum of one time. And none of them need to worry about the script being already registered.

There is a 'IsClientScriptIncludeRegistered(stringkey)' method which you can use to see if a script has already been included under that key but it seems pretty redundant to do that check before registering as multiple attempts to register do not throw exceptions or cause any other errors.

Doing the check client-side means that, assuming the multiple javascript references are cached by the browser (they may not be), you still have multiple tags and the over head of each one causing some javascript to run. If you had 20 instances of your control on a page, you could get serious issues.

Answer 4

var storePath = [];
function include(path){
if(!storePath[path]){
    storePath[path]= true;
    var e = document.createElement("script");
    e.src = path;
    e.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(e);
    return false;
 } }

use this in your main page and call function include with argument javascript file name