检查javascript是否已附加到页面？

Question

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.

Answer 1

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
}

Answer 2

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+"']");

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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