Externe Javascript-und CSS Dateien dynamisch nachladen.

Manchmal ist es sinnvoll eine externe Javascript oder CSS Datei erst später zu laden. Vielleicht um den Seitenaufbau zu beschleunigen oder nur gerade eben benötigte Funktionen zu laden.

Besonders im CMS Umfeld ist das ein echter Vorteil. Durch die Verwendung von Templates steht einem hier häufig nur die Möglichkeit zur Verfügung alle vielleicht benötigten Javascript Dateien über den HTML Head zu laden.
Ein dickes Minus, ganz klar. Ist die Seite nicht gerade eine Ajax Anwendung macht das wenig Sinn. Also warum nicht dynamisch nachladen?

Mit einem CMS ist natürlich auch das kein Problem. Man erstellt sich einfach einen oder mehrere Container die entsprechenden Code zum Nachladen haben und Platziert den Platzhalter im Template. Fertig.

Was aber wenn mehrere Redakteure an der Seite arbeiten. Entweder einigt man sich auf einen gemeinsamen Container oder jeder verwendet seinen eigenen. Keine gute Lösung da das Ganze recht schnell unübersichtlich wird und fehleranfällig ist.

Besser und weniger fehlerträchtig ist folgenden Lösung. Eine Javascript Funktion die eingebettet im Template immer zur Verfügung steht und bei Bedarf externe JS-Dateien nachlädt.

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

Dieses kurze Stück Javascript Code im Head bewirkt das dynamische Nachladen von Javascript Dateien. In leichter Abwandlung lässt es sich auch für CSS Dateien verwenden.

Sauberer, übersichtlicher HTML Code ist das Ergebnis und der Browser zeigt den eigentlichen Inhalt schneller an, da er nicht mehr auf das Ergebnis der externen Dateien warten muss.