Schreinert.com

Für ein Web-Projekt wollte ich dynamisch per Ajax Web-Seiten-Inhalte nachladen. Dabei stieß ich wiedermal auf das Problem, dass ich die Seitenfragmente einfach in die bestehende Web-Seite nachladen möchte, aber der enthaltene Javascript-Code nicht ausgeführt wurde. Dumm nur, dass das nachgeladene Seiten-Fragment zu 99% aus Javascript bestand. Die Lösung für dieses “schwerwiegende” Problem stellte sich letztendlich nach stundenlanger Suche als sehr trivial heraus.

Die Aufgabe besteht — wie schon geschrieben — darin, ein Seitenfragment dynamisch per Ajax nachzuladen und in den bestehenden Content einzufügen. Dank Yahoo’s User Interface ( YUI ) klappte der Ajax-Aufruf zum Laden des Inhalts auch recht flott. Als Antwort kommt aber einen Text-String (responseText) zurück, statt einem erhofften DOM-Node-Objekt.

Ansich lässt sich dieser reine Text einschließlich HTML-Formatierungen einfach in ein bestehendes HTML-Element einbinden, etwa in ein DIV-Element mit der id=”content”:

document.getElementById('content').innerHTML=responseText;

Diese einfache Zeile überschreibt den Inhalt des DIV-Elements durch den erhaltenen String. Wie gesagt werden Format-Anweisungen wie <strong>, <div> und weitere korrekt angezeigt.

Anders aber sieht es mit Javascript aus. Die Javascript-Engine des Browsers reagiert offensichtlich nur auf ein Node-Objekt vom Typ <script>. Es hilft alles nichts, ohne ein vermeintlich aufwändiges Parsen des HTML-Strings gibt es kein Javascript. Die Lösung aber ist doch trivialer, als von mir gedacht.

Die Antwort lautet DocumentFragment. Dieser Typ wird im W3C DOM Standard beschrieben und wird von Firefox wie auch vom Internet Explorer unterstützt. Nachfolgend ist ein Code-Beispiel aufgeführt, welches die Zeichenkette mit dem HTML-Code in der Variable “text” enthält. Weiterhin gilt, dass mein DIV-Element mit der id “content” als Container für den nachgeladenen Code herhalten soll.

var divElement = document.createElement('div');
divElement.innerHTML = text;
var docFrag = document.createDocumentFragment();
while (divElement.firstChild)
docFrag.appendChild(divElement.firstChild);
document.getElementById("document").appendChild(docFrag);

Dieses einfache Beispiel genügt, um sein nachgeladenes Javascript lauffähig zu machen.

Noch ein Tipp: Dieses Beispiel fügt das Code-Fragment als letztes Kind von “content” ein. Alles was bereits im DIV-Element enthalten ist bleibt auch nachher sichtbar. Will man einen leeren Container verwenden, so lässt sich dieser wie folgt entrümpeln:

while ( document.getElementById("content").firstChild )
document.getElementById("content")
.removeChild(contentNode.firstChild);