Ajax Lösung für verzögertes Laden von JS Code der document.write enthält

Samuel Becker

In vielen älteren Webprojekten gibt es noch JavaScript Code, der auf document.write setzt. Das war früher eine verbreitete Methode, um Inhalte direkt während des Seitenaufbaus in das HTML Dokument einzufügen.

Heute gilt diese Technik jedoch als problematisch, vor allem dann, wenn Skripte nicht sofort beim ersten Laden der Seite, sondern erst verzögert oder asynchron nachgeladen werden sollen. Genau an dieser Stelle entsteht ein Konflikt: Moderne Performance Optimierung möchte JavaScript möglichst spät laden, während document.write davon ausgeht, dass das Dokument noch aktiv aufgebaut wird.

Eine Ajax Lösung kann hier helfen. Sie ermöglicht es, Inhalte oder Skripte zeitversetzt zu laden, ohne die gesamte Seite neu zu laden. Gleichzeitig muss aber sorgfältig damit umgegangen werden, wenn der nachgeladene JavaScript Code document.write enthält.

Denn document.write kann in einem bereits vollständig geladenen Dokument ungewollt die komplette Seite überschreiben oder zu fehlerhaftem Verhalten führen. Deshalb braucht es eine saubere Strategie, um alte Technik mit modernen Ladeverfahren zu verbinden.

Warum document.write beim verzögerten Laden problematisch ist

document.write funktioniert nur zuverlässig während der Phase, in der der Browser das HTML Dokument einliest. Wird dieselbe Funktion später aufgerufen, etwa nachdem die Seite bereits sichtbar ist und weitere Inhalte per Ajax geladen werden, kann das schwerwiegende Folgen haben. Im ungünstigsten Fall wird der bestehende Seiteninhalt gelöscht und durch den neu geschriebenen Inhalt ersetzt.

Das Problem verschärft sich, wenn externe Skripte eingebunden werden, die intern document.write nutzen, zum Beispiel ältere Werbeskripte, Tracking Systeme oder historische Widgets. Solche Skripte wurden nicht für asynchrones Nachladen entwickelt. Sie erwarten eine Umgebung, in der sie direkt in den Seitenstrom schreiben können. Bei einem Ajax basierten Nachladen ist diese Annahme jedoch nicht mehr erfüllt.

Lesen:  Regex Syntax verstehen: Muster für Texte präzise beschreiben

Deshalb reicht es nicht aus, den betroffenen JavaScript Code einfach per Ajax oder dynamischem script Element nachzuladen. Es muss vielmehr geprüft werden, wie der Inhalt sicher eingebunden werden kann, ohne das bestehende DOM zu beschädigen.

Was eine Ajax Lösung in diesem Zusammenhang bedeutet

Mit Ajax ist hier nicht nur der klassische XML HTTP Request gemeint, sondern allgemein das asynchrone Nachladen von Inhalten oder Skripten über JavaScript. Ziel ist es, eine Seite zunächst schnell anzuzeigen und bestimmte Bestandteile erst später zu laden. Das spart Ladezeit, verbessert die wahrgenommene Performance und kann die Benutzererfahrung deutlich erhöhen.

Eine Ajax Lösung für problematischen JavaScript Code besteht darin, nicht den document.write Aufruf selbst direkt auszuführen, sondern dessen Ausgabe kontrolliert abzufangen und an einer gewünschten Stelle in die Seite einzufügen. Das kann auf verschiedene Weise geschehen. Eine Möglichkeit ist das Umschreiben des alten Codes. Eine andere besteht darin, eine isolierte Umgebung zu schaffen, in der das alte Skript weiter funktionieren kann.

Ajax Lösung für JS Code

Ansatz eins: Alte Skripte modernisieren

Die beste und dauerhaft sauberste Lösung ist, den betroffenen JavaScript Code anzupassen. Statt document.write sollte direkt mit DOM Methoden gearbeitet werden. Also nicht mehr in das Dokument schreiben, sondern gezielt Elemente erzeugen und an definierte Container anhängen.

Ein einfaches Beispiel: Statt per document.write('<div>Inhalt</div>') einen Block zu erzeugen, wird ein div Element mit createElement erstellt und anschließend per appendChild oder insertAdjacentHTML in den gewünschten Bereich eingefügt. Damit wird der Code unabhängig vom Ladezeitpunkt. Er kann sofort, verzögert oder nach einem Ajax Aufruf ausgeführt werden, ohne die ganze Seite zu gefährden.

Dieser Weg ist vor allem dann sinnvoll, wenn man Zugriff auf den Quellcode hat. In internen Projekten oder bei selbst entwickelten Modulen sollte document.write konsequent entfernt werden. Das verbessert nicht nur die Stabilität, sondern erleichtert auch die Wartung und macht den Code zukunftssicher.

Ansatz zwei: Ausgabe abfangen und gezielt einsetzen

Nicht immer kann der ursprüngliche Code geändert werden. Bei externen Bibliotheken, historischen Plugins oder Drittanbieter Skripten fehlt oft der direkte Zugriff. In solchen Fällen kann eine technische Zwischenlösung helfen. Dabei wird document.write vorübergehend überschrieben, sodass die Ausgabe nicht mehr in das gesamte Dokument fließt, sondern in einem Puffer gesammelt wird.

Lesen:  Symfony Live hatte im November 2012 erstmals in Berlin stattgefunden

Das Prinzip ist einfach: Vor dem Laden des problematischen Skripts wird eine eigene Funktion definiert, die den Text sammelt. Nach dem Laden wird dieser Text an der gewünschten Stelle im DOM ausgegeben. So lässt sich verhindern, dass das gesamte Dokument überschrieben wird.

Wichtig ist dabei, dass diese Methode mit Vorsicht eingesetzt wird. Manche alten Skripte verwenden nicht nur document.write, sondern bauen auf bestimmte Ladefolgen oder Seiteneffekte auf. Das reine Umleiten der Ausgabe reicht dann möglicherweise nicht aus. Trotzdem ist dieser Ansatz oft eine praktikable Brückenlösung, wenn eine vollständige Modernisierung kurzfristig nicht möglich ist.

Ansatz drei: Isolierung über ein iframe

Wenn ein Skript besonders alt oder schwer kontrollierbar ist, kann ein iframe die sicherste Lösung sein. Dabei wird das problematische Skript nicht direkt in die Hauptseite geladen, sondern in ein eingebettetes Unterdokument. Dort kann document.write weiterhin wie erwartet arbeiten, ohne die eigentliche Seite zu beeinflussen.

Diese Methode ist besonders nützlich bei Werbemitteln, Partner Widgets oder eingebetteten Inhalten externer Dienste. Das Hauptdokument bleibt stabil, während das alte Skript in seiner eigenen Umgebung läuft. Der Nachteil besteht darin, dass Kommunikation, Gestaltung und Größenanpassung etwas aufwendiger werden. Dennoch ist ein iframe oft die robusteste Lösung, wenn Kompatibilität wichtiger ist als Eleganz.

Performance und Benutzerfreundlichkeit

Ein verzögertes Laden von JavaScript hat meist das Ziel, die Seite schneller nutzbar zu machen. Gerade große Drittanbieter Skripte bremsen oft das erste Rendering. Wird ihr Laden per Ajax oder dynamischem Nachladen verschoben, kann der Hauptinhalt früher sichtbar werden. Das verbessert Kennzahlen wie Ladezeit und Interaktivität.

Allerdings darf die technische Lösung nicht zu neuen Problemen führen. Wenn ein nachgeladenes Skript Fehler produziert, Inhalte falsch platziert oder das DOM zerstört, ist der Performance Gewinn schnell wertlos. Deshalb sollte jede Ajax Lösung gründlich getestet werden. Dazu gehören verschiedene Browser, langsame Netzwerke und auch Szenarien, in denen externe Skripte verspätet antworten.

Lesen:  AGB's – warum Allgemeine Geschäftsbedingungen so wichtig sind

Ebenso wichtig ist eine klare Struktur im Seitenaufbau. Der Bereich, in dem nachgeladene Inhalte erscheinen sollen, sollte schon im HTML vorgesehen sein. So weiß der JavaScript Code genau, wohin seine Ausgabe gehört. Das reduziert Fehler und macht die Lösung leichter nachvollziehbar. Über HTML kann man übrigens auch Links einbauen.

Fazit

Die Kombination aus verzögertem Laden von JavaScript und altem Code mit document.write ist ein typisches Problem in gewachsenen Webprojekten. Moderne Seitenarchitekturen setzen auf asynchrone Prozesse, modulare Komponenten und kontrollierte DOM Manipulation. document.write passt dazu kaum noch und führt beim späten Nachladen schnell zu Fehlern.

Die beste Lösung ist immer die Ablösung alter Techniken durch moderne DOM Methoden. Wo das nicht möglich ist, können Übergangslösungen helfen, etwa das Abfangen der Ausgabe oder die Isolierung in einem iframe. Entscheidend ist, dass das bestehende Dokument geschützt bleibt und der nachgeladene Inhalt gezielt an der richtigen Stelle erscheint.

Eine gute Ajax Lösung verbindet daher zwei Ziele: bessere Performance und technische Stabilität. Wer alte Skripte richtig einbindet oder modernisiert, kann auch in älteren Systemen ein deutlich zuverlässigeres und schnelleres Ladeverhalten erreichen.

Lesen Sie auch gerne weitere Artikel auf unserer Startseite.

Samuel Becker