Generelt
I en artikel om Designing for webstandards ved kapitlet "Step 3: define the appearance, a.k.a. Style" var der et eksempel på, hvordan man dynamisk inkluderet et stylesheet. Det har inspireret mig til at lave denne kode der dynamisk inkludere en JavaScript fil.
Koden virker i Microsoft Internet Explorer 5+, Netscape 6+ og Mozilla 1.0+ som understøtter DOM1.
Eksempel
Klik på et af de 2 knapper for at hente en af js-filerne fra serveren.
Et "rent" eksempel kan også findes her.
Koden
Koden benytter namespaces (mha.link2JS) som du kan læse mere om i artiklen Designing for portability: 1 ved kapitlet "Isolating your code through Namespaces"
mha.link2JS = function(uri, id) {
if (document.createElement && document.getElementsByTagName) {
var head = document.getElementsByTagName('head').item(0);
if (id) var old = document.getElementById(id);
if (old) head.removeChild(old);
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('defer','defer');
script.setAttribute('src',uri);
if (id) script.setAttribute('id',id);
void(head.appendChild(script));
} else {
sMsg='This application requires that your browser support DOM level 1.\n'+
'Please upgrade to a newer browser such as \n'+
'Microsoft Internet Explorer 5.0 or Netscape 6.0'
alert(sMsg);
}
}
Funktionen mha.link2JS tager 2 parameter uri og id. Uri er url til den fil på serveren der
dynamisk skal inkluderes. Id kan undlades, men benyttes til at overskrive
allerede dynamisk inkluderet js-filer. Jeg anbefaler at id bruges, da hvert eneste dynamisk inkluderet js-fil fylder i klientens hukommelse.
Først undersøges der via if (document.createElement && document.getElementsByTagName) om browseren supportere DOM1. Hvis browseren har DOM1 inkluderes javascript filen,
hvis ikke kommer der en fejl meddelelse.
For at få fat i <head>'eren bruges document.getElementsByTagName
som returnere et array af alle HEAD-tags. Variablen head sættes til den første i arrayet.
Hvis funktionen får et id søges efter et "gammelt" dynamisk inkluderet Javascript.
Findes der allerede et script slettes dette.
Så oprettes der et nyt script af typen "text/javascript".
Defer bliver sat således at browseren ikke behøver at vente på hele scriptet bliver parset og evalueret.
Der findes flere informationer om defer på W3C.
Herefter sættes uri til sourcen på javascriptet.
Hvis funktionen har fået et id parameter, sættes dette også på scriptet.
Til allersidst tilføjes scriptet til <head>'eren.