HTML-Schnipsel werden oft nach dem Baukastenprinzip zu einer HTML-Datei zusammengesetzt. Dabei wird i.d.R. das serverseitige Includen verwenden. Dies kann entweder vom CMS System bereits beim zusammensetzen (generieren) von HTML-Seiten auf Basis von Templates geschehen oder aber “on the fly” bei jedem Request wie das i.d.R. via PHP basierten CMS-Engines der Fall ist. Werden die HTML-Bausteine serverseitig zusammengesetzt, so bekommt der Browser davon nichts mit. Hierzu müssen die einzelnen Baustausteine auch nicht einmal unbedingt zwingend im Filesystem des Server liegen – auch Remote-Includes sind u.U. Serverseitig möglich (wenn sie jedoch auch Sicherheitsprobleme mit sich bringen und daher möglichst nicht aktiviert sein sollten) und können bei Bedarf auch vor der Ausgabe an den Browser noch Nachbearbeitet werden und so ggf. den Bedürfnissen angepasst werden.
Im Gegensatz zu den serverseiten Remote-Includes, die stets die Resourcen des Servers (und entsprechende Rechte auf dem Server) benötigen, kann aber auch clientseitig included werden.
Hierzu greift man auf JavaScript zurück, welches strengenommen zwar keine solchen HTML-Includes unterstützt aber das Nachladen von JavaScript-Code, wie Sie es sicher schon oft in HTML-Codes gesehen habe:
[HTML]
.
[/HTML]
Wenn der Browser auf eine solche Anweisung trifft lädt er bei aktiviertem JavaScript die referenzierte Datei nach wobei die Referenz auch zu einem anderen Server zeigen kann (http://www.entferntedomain.de/morejavascriptcode.js). In der nachgeladenen JavaScript-Datei kann jedoch noch nicht direkt der HTML-Code enthalten sein, weil die JavaScript-Engine ja den Code interpretieren will und dies einfach zu einem Fehler führen würde und wir so nicht zum gewünschen Ziel kämen.
Was wir also brauche ist ein Wrapper der uns das gewünschte HTML-Fragment in gültigen JavaScript-Code einwickelt.
Wenn “morejavascriptcode.js” also einfach eine Folge von document.write(“Hier kommt HTML-Code”); Statements enthält, wird die JavaScript-Engine diesen Code interpretieren und uns das gewünschte HTML zur Laufzeit in das HTML einfügen.
Mit diesem Prinzip bieten viele Sites einige meist dynamische HTML-Schnipsel an, die sich jeder auf einfache Weise zunutze machen kann, denn es ist nur HTML-Code bzw. JavaScript Code erforderlich um die eigene HTML-Seite mit dem HTML-Code-Schnipsel von anderen Anbietern zu erweitern. So basiert z.B. der in der rechten Spalte dargestellte “Lesetipp” auf diesem Prinzip. Die von mir kürzlich im Google-Reader gelesenen und als interessant markierten Artikel werden als “JavaScript-Include” bereitgestellt und ich kann es einfach per HTML/JavaScript-Anweisung hier einbinden. Vorteil: Das funktioniert für jeden, der HTML publizieren kann (kein PHP, kein CGI, keine Rechte für Remote-Includes erforderlich). Nachteil: JavaScript muss beim Browser aktiviert sein und natürlich gelten die üblichen Restriktionen für JavaScript-Code in Bezug auf Suchmaschinen. (Eine Alternative, auf die ich hier jedoch nicht weiter eingehen will wäre die Integration per iFrame).
Ein praktisches Beispiel: Die Site www.ln-online.de stellt unter http://www.ln-online.de/extern/hl468.htm und http://www.ln-online.de/extern/oh468.htm aktuelle Meldungen aus Lübeck und Ostholstein als HTML Schnipsel zur Verfügung, die auf jeder privaten Homepage integriert werden dürfen. Kann dieser HTML-Schnipsel nicht direkt (via SSI oder via PHP remote-Include) integriert werden, so steht unter http://www.ln-online.de/include/code/csi.htm?f=hl468 bzw. http://www.ln-online.de/include/code/csi.htm?f=oh468 eine Variante zur Verfügung, die statt des HTML-Codes einen JavaScript-Code bereitstellt, der mit nur einer Zeile eingebunden werden kann:
[HTML]
[/HTML]
Das Ergebnis sieht dann so aus:
Die Meldungen aus dem Bereich Ostholstein können wie folgt integriert werden:
[HTML]
[/HTML]
Und das entsprechenden Ergebnis für Ostholstein sieht es dann so aus:
HTML-Schnipsel die auf externen Sites verwendet werden sollen, müssen immer absolute Pfade enthalten und sollte keine globalen CSS-Definitionen vornehmen, damit eine harmonische Integration auf allen Seiten ermöglicht wird.
Weiterführende Informationen und eine Gegenüberstellung von Serverside-Includes vs. Clientside-Includes gibt es hier in englischer Sprache.