JavaScript - Laden eines Scripts aus JavaScript heraus
Beispiel ansehen
Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Objektreferenz Element-Objekttyp] [Objektreferenz Document-Objekttyp] [Objektreferenz style-Objekt]
In den folgenden Quelltexten sind wichtige Bereiche grün und Kommentare gelb markiert.
<html> <head> <title> JavaScript - Beispiel </title> <script type="text/javascript"> <!-- Script-Bereich einleiten --> <!-- /* HTML-Kommentar fuer Browser ohne JavaScript */ var script_element=0,heads=0; function LoadJavaScript(file_url) /* Laedt ein JavaScript mit dem spezifizierten Dateinamen Achtung: wurde bisher nur in MSIE und Mozilla/Netscape mit Erfolg getestet */ { /* wenn nicht schon getan: Array aller Head-Bereiche geben lassen (normalerweise gibt's nur einen): */ if (heads==0) heads=document.getElementsByTagName("head"); /* wenn schonmal geladen: altes Script-Element wegwerfen */ if (script_element!=0) { heads[0].removeChild(script_element); delete script_element; } /* neues Script-Element erzeugen: */ script_element=document.createElement("script"); /* Skript-MimeType auf text/javascript setzen: */ script_element.type="text/javascript"; /* Quelldatei angeben: */ script_element.src=file_url; /* Das Script in den ersten (der nullte ist der erste :-] ) Head-Bereich einbinden (veranlasst Ladevorgang und Ausfuehrung): */ heads[0].appendChild(script_element); } /* kleiner unbedeutender Zaehler, nur zur Demonstration: */ var counter=0; /* und ein Array voller Farbwerte, auch nur zur Demonstration: */ var colors=new Array("#FFFFDD","#FFDDDD","#FFDDFF","#DDDDFF","#DDFFFF","#DDFFDD"); //--> <!-- HTML-Kommentarende --> </script> <!-- Script-Bereich beenden --> </head> <body> <a href="loadjs.html">Erklärung</a> <!-- Link zurueck auf loadjs.html --> <br><br><br> <!-- Hier folgt eine Div-Sektion: --> <div name="myBox" id="myBox" style="border:solid 1px black; padding:1ex;"> klicke auf den Link </div> <br> <!-- hier lassen wir per Klick das JavaScript laden: --> <a href="javascript:LoadJavaScript('exloadjs.js')">Script laden und ausfuehren</a> <!-- hier lassen wir per Klick das von php erzeugte JavaScript laden: --> <a href="javascript:LoadJavaScript('exloadjs.php?counter='+counter+'&step=1')">Script (erzeugt mittels PHP) laden und ausfuehren</a> </body> </html>
/* Den Zaehler, den wir in exloadjs.html definiert haben, hochzaehlen: */ counter++; /* Den Stil des Hintergrundes der Div-Sektion mit den in exloadjs.html definierten Farben setzen: */ var theBox=document.getElementById("myBox"); theBox.style.background=colors[counter%colors.length]; /* und noch den Inhalt aendern: */ theBox.innerHTML="Das Script \"exloadjs.js\" wurde "+counter+" mal geladen";
<?php /* * (c) 2004 Detlef Lindenthal & Ulrich Kritzner * ja, an dem Dreizeiler haben zwei Leute gebastelt ;-) */ /* Inhalt soll als JavaScript interpretiert werden: */ header("content-type: text/javascript"); /* Script soll jedes mal neu geladen und nicht zwischengespeichert werden: */ header("cache-control: no-store, no-cache, must-revalidate"); header("cache-control: post-check=0, pre-check=0"); /* Argument counter holen */ $counter=$_GET["counter"]; /* Argument step holen */ $step=$_GET["step"]; /* counter hochzaehlen */ $counter+=$step; /* Counter per JavaScript setzen */ printf("counter=%d;",$counter); ?> /* Den Stil des Hintergrundes der Div-Sektion mit den in exloadjs.html definierten Farben setzen: */ var theBox=document.getElementById("myBox"); theBox.style.background=colors[counter%colors.length]; /* und noch den Inhalt aendern: */ theBox.innerHTML="Das Script \"exloadjs.js\" wurde "+counter+" mal geladen";