Javascript dynamisch nachladen

Mit der folgenden JS-Methode lässt sich dynamisch ein Javascript von einer beliebigen Quelle laden beziehungsweise nachladen.

<script type="text/javascript">
function loadScript(scriptname) {
  var s = document.createElement('script');
  s.setAttribute('type','text/javascript');
  s.setAttribute('src',scriptname);
  document.getElementsByTagName('head')[0].appendChild(s);
}
loadScript('http://www.analysisfreaks.de/nachladeSkript.js');
</script>

Quelle: http://www.cmsr.sruttloff.de/home/tipps-und-tricks/js-und-css-dynamisch-nachladen.htm

Das oben beschriebene Script ist jedoch relativ ‘dumm’, da es nicht erkennt ob ein Skript eventuell schon geladen wurde. Dieses Manko läßt sich einfach abstellen, indem es vorher prüft, welche Skripte bereits geladen wurden. Das folgende JS-Snippet liest die Src-Attribute aller Script-Elemente und gibt diese aus.

var a="";
var b=document.getElementsByTagName("script");
for(i=0;i<b.length;i++){
a+=b[i].src+"\n"
};
alert(a);

Beides zusammengeworfen und um das Nachladen von Css-Stylesheets erweitert, ergibt das folgende Skript:

function loadScript(scriptname) {
 if(checkAlreadyLoaded('script','src',scriptname)) return;
 var s = document.createElement('script');
 s.setAttribute('type','text/javascript');
 s.setAttribute('src',scriptname);
 document.getElementsByTagName('head')[0].appendChild(s);
}

function loadCss(stylename) {
 if(checkAlreadyLoaded('link','href',stylename)) return;
 var s = document.createElement('link');
 s.setAttribute('type','text/css');
 s.setAttribute('rel','stylesheet');
 s.setAttribute('href',stylename);
 document.getElementsByTagName('head')[0].appendChild(s);
}

function checkAlreadyLoaded(name,att,val){
 var b=document.getElementsByTagName(name);
 for(i=0;i<b.length;i++){
 var attVal = b[i].getAttribute(att);
 if(attVal==val) return true;
 };
 return false;
}

Ein klick auf das "Try it" oben zeigt wie das nachgeladene Skript (delayedCssLoad.js) hinzugekommen ist.

Tags: css, javascript