JS und CSS Dateien dynamisch laden
Normalerweise werden JavaScript und CSS Dateien direkt im head-Bereich eingebunden. Doch was ist, wenn man diese nachladen möchte? In diesem Artikel erkläre ich es euch.
Wie gesagt, normalerweise werden JS und CSS Dateien direkt im head eingebunden:
1 2 3 4 | <head>
<script type="text/javascript" src="meinscript.js"></script>
<link rel="stylesheet" type="text/css" href="meinstylesheet.css" />
</head>
|
Für die meisten Anwendungsbereiche reicht das voll und ganz aus, allerdings braucht man das ganze in der bunten AJAX-Welt ab und zu etwas dynamischer, vor allem wenn es um das Thema Ressourcen geht. Ein einfaches
1 | document.getElementById('xyz').innerHTML = '<script type="text/javascript" src="meinscript.js"></script>';
|
tut's da leider nicht.
Wir müssen wohl oder übel das DOM (Document Object Model) benutzen, zuerst ein neues SCRIPT oder LINK Element erstellen, die entsprechenden Attribute dranklatschen und zum Schluss mit element.appendChild() das ganze an die richtige Stelle im Dokumentenbaum packen.
Das ganze hört sich jetzt wahrscheinlich schwieriger an als es wirklich ist. Aber ich will dich nicht mit noch mehr Theorie nerven, hier ist der Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | function loadfile(filename, filetype){
if (filetype=="js")
{
var myelement=document.createElement('script');
myelement.type="text/javascript";
myelement.src=filename;
}
else if (filetype=="css")
{
var myelement=document.createElement("link");
myelement.rel="stylesheet";
myelement.type="text/css";
myelement.href=filename;
}
if (typeof myelement!="undefined")
document.getElementsByTagName("head")[0].appendChild(myelement);
}
// Ein paar Beispiele
loadfile("meinscript.js", "js");
loadfile("javascript.php", "js");
loadfile("meinstylesheet.css", "css");
|
Weil externe JavaScripts und CSS' jede beliebige Dateiendung haben können (z.B. .php), brauchen wir den filetype Parameter.
Es gibt jedoch ein Problem: document.getElementsByTagName("head")[0].appendChild(myelement) fügt die Elemente immer ans Ende des head-Bereichs, ohne zu gucken ob diese schon existieren. Das bedeutet, dass wenn du loadfile("meinfile.xy", "js"); zweimal aufrufe, die Datei meinfile.xy auch zweimal geladen wird. Dies ist wieder ein Problem aus Ressourcentechnischer Sicht, es lässt sich aber ganz leicht umgehen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var filesadded="";
function checkloadfile(filename, filetype)
{
if (filesadded.indexOf("["+filename+"]")==-1)
{
loadfile(filename, filetype);
filesadded+="["+filename+"]";
}
else
{
alert("Datei wurde schon geladen!");
}
}
checkloadfile("meinscript.js", "js");
checkloadfile("meinscript.js", "js");
|
Post comment
Zum Kommentieren musst du angemeldet sein.
4 comments
PromyLOPh am July 24, 2008 um 11:22 a.m.
Lukas Klein am July 25, 2008 um 11:53 p.m.
Julian am July 27, 2008 um 10:41 p.m.
Chris am Aug. 27, 2008 um 1:18 p.m.