0

Javascript dynamisch nachladen

Posted by admin on December 23, 2010 in Programming |

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

Der “Klick” auf den Button lädt ein externes Javascript nach, dass wiederum ein CSS-Stylesheet nachlädt, das nach fünf Sekunden eine gestrichelte Linie um diesen Text malt.


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

Tags: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Copyright © 2010-2020 Analysisfreaks.de All rights reserved.
This site is using the Desk Mess Mirrored theme, v2.0.4, from BuyNowShop.com.

Developed by Hardik