Is there any way to check if javascript file is already attached to the page by its file name.

For eg :

if ("path-to-script/scriptname.js") already embeded
{
call related function
}
else
{
Append '<script src="path-to-script/scriptname.js" type="text/javascript"> </script> '
call related function
}

Basically I dont want 1 script to be attached twice on the same page.

Is there any way to check if javascript file is already attached to the page by its file name.

For eg :

if ("path-to-script/scriptname.js") already embeded
{
call related function
}
else
{
Append '<script src="path-to-script/scriptname.js" type="text/javascript"> </script> '
call related function
}

Basically I dont want 1 script to be attached twice on the same page.

• javascript
• jquery

• 1 Given the use case, you could reverse the condition, do away with the else, just call the function outside of the if-else block after loading the script. – user684934 Commented Sep 17, 2012 at 9:44
• possible duplicate stackoverflow.com/questions/11599311/… – Netorica Commented Sep 17, 2012 at 9:45
• @Mahan This is not a possible Duplicate. My requirements are different.. Thanks – Kuldeep Daftary Commented Sep 17, 2012 at 9:52

6 Answers 6

You might not always know what objects or functions a script contains in advance, in such cases you can search for script tags containing the desired src.

With jquery:

$("script[src*='"+scriptName+"']");

Without jquery:

document.querySelector("script[src*='"+scriptName+"']");

You'd need to test whether the actual function from the script file exists, like this:

if (window.function_name) {
    // script loaded
} else {
    // script not loaded
}

I agree with @zathrus though I think you should be using requirejs for things like this. The idea is that dependencies must be fetched before executing the code. The above method you are using may work but you can not guarantee anything.

RequireJS will beautifully maintain all the dependency loading. It is very easy to learn as well.

Simply check if the library is defined, otherwise import it:

if ( !jQuery ) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    document.body.appendChild(s);
    s.src = "path-to-script/scriptname.js";
    void(0);
}
// call function

you really need a script loader.. because as you said you want it specific with the javascript resource filename and this is sort of your javascript files are depending to each other

www.headjs.com

www.modernizr.com

www.yepnopejs.com

I thought this will help you.

if (typeof scriptname== "undefined") {
   var e = document.createElement("script");
   e.src = "scriptname.js";
   e.type = "text/javascript";
   document.getElementsByTagName("head")[0].appendChild(e); 
}