Hvis man indsætter klientside script på sine websider med Xslt transformeringer, kan man af ukendte årsager få problemer med den resulterende html. Jeg har oplevet (Sitecore) at hvis jeg forsøger at indsætte en række scripttags med reference til eksterne javascriptfiler. Ja, så bliver de indlejret i hinnanden, og resulterer i scriptfejl:

<script type="text/javascript" src="/script/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/script/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/script/jquery.easing.compatibility.js"></script>

Bliver til:

<script type="text/javascript" src="/script/jquery.cycle.all.js">
    <script type="text/javascript" src="/script/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="/script/jquery.easing.compatibility.js"></script>
</script>

Jeg opgav at finde den dybere forklaring på problemet, og lavede en lille funktion i stedet:

var loader = function(url) {
    var tag = document.createElement("script");
    tag.attributes.setNamedItem("type", "text/javascript");
    tag.attributes.setNamedItem("src", url);
    document.getElementsByTagName("head")[0].appendChild(tag);
}

I sin enkelthed, så tager den en script-url, og konstruerer en DOM-node af typen: SCRIPT. De ønskede attributter sættes på noden, for til sidst at indsætte den i head-sektionen. Nu kan jeg så blot lave en lille initialiceringsblok:

loader("/script/jquery.cycle.all.js");
loader("/script/jquery.easing.1.3.js");
loader("/script/jquery.easing.compatibility.js");

Og jeg er fri for scriptfejl…

Man kan også bruge funktionen, hvis man ønsker at loade sine scripts dynamisk/konditionelt. Inkluderer en type script hvis brugeren har Silverlight installeret, eller loade script ud fra browsertypen. På den måde kan man minimerer de bytes der sendes til klienten.

loader(navigator.appName.indexOf("Microsoft") != -1 ? "ie.js" : "fox.js");

Mulighederne er uendelige.

Code on…