removing duplicate script from page

Question

I am trying to make use of the yahoo exceptional performance rule : avoiding duplicate script

To do so i would like to be able to know whether or not a script was already added to the page before injecting it in the page. It looks like i can't figure what has been added in asp.net code behind unless i have a scriptmanager added to the page. but i would like to avoid using asp.net AJAX. From the description of the rule, it looks like it is something possible in php though.

Assuming that i can't do the check in my code behind, i was considering using jQuery $.getString function but it doesn't check before fetching the script. If i was to choose the javascript file, would i have to parse the whole http response in order to figure out which script was loaded on the page?

Answer 1

If the page is registering the scripts with the ASP.NET Page.ClientScript Register APIs then you can use Page.ClientScript.IsClientScriptIncludeRegistered. On the other hand, if you are using those APIs you don't really need to call it, since it already ensures only one of each is registered.

http://msdn.microsoft.com/en/us/library/system.web.ui.clientscriptmanager.isclientscriptincluderegistered.aspx

If the page just has regular ole script elements statically in the markup, and you need to detect if a script is loaded on the client side, you will have to get all the script elements on the page and look at their .src values. The thing with that is that some browsers automatically resolve that url to a full path, not just the one you declared. So, you can account for that in various ways -- you can just search for the end of the string being the script you want, or you can cause the url you want to compare with to also be resolved by setting it onto a dynamically created script element (which you never add to the DOM but is still resolved for you).

This is just off the top of my head, sorry if I get something wrong:

var s = document.createElement("script");
s.src = "foo.js";

var loaded, scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
    if (scripts[i].src === s.src) {
        loaded = true;
        break;
    }
}
if (loaded) {
   // this script is already loaded
   // assuming you dont have multiple copies in different locations
}

Answer 2

yeah you have to parse the whole response...

why don't you create a javascript file and put all of your javascript there and then import that javascript file in your code??? in this way you can get rid of duplicate script insertion.

Answer 3

You don't need to use any client-side scripting to do this... you can do this in your code behind using the ClientScriptManager without needing to make use of ASP.NET AJAX (I think you're confusing ClientScriptManager with ScriptManager*) in your control/page just use:

ClientScript.RegisterClientScriptInclude("some-script", "myScript.js");

or from your user controls:

Page.ClientScript.RegisterClientScriptInclude("some-script", "myScript.js");

This will use the key "some-script" & only register one copy of the script on the page.

*To be clear I think the confusion is arrising from the difference between these:

• ClientScriptManager if a server-side helper class which is used to manage client side scripts (in other words its whole purpose is to do exactly what you are trying to do). It is accessed via the Page's ClientScript property.
• ScriptManager is a Control used to aid client side Ajax scripting in ASP.NET AJAX

(hell I even confused myself & gave the wrong example code initially)

Answer 4

well that wouldn't actually work in a master detail scenario with multiple web user controls.

Then you wouldn't have control over who has to do the script initialization if the web user control is dynamic.

It's easier to link once, but a developer would have to weigh his options between ClientManager and using a script load.