Artikel - Detailansicht

Icon Aktuelles Content-Syndication mit CF und JS

Es gibt mal wieder ein neues Buzzword im Internetbereich: Content-Syndication. Im Prinzip ist das nichts anderes als das Anzeigen von fremden Inhalten innerhalb der eigenen Website und möglichst noch innerhalb der eigenen Page.
Ein Beispiel für Content-Syndication ist das CFML.de-Forum, das auf http://cfug.de ebenfalls mit einer anderen Optik zu sehen ist.
Da das Thema scheinbar viele Lesern interessiert (siehe Foren), soll der folgende Artikel eine einfache Form der Content-Syndication beschreiben.

Dazu stellen wir uns folgendes Szenario vor. Der Server www.info.de soll als Lieferant dienen. Dort gibt es ein Script, welches die aktuelle Uhrzeit/Datum und eine Liste mit Informationen anderen Webseiten zur Verfügung stellt. Andere Webseiten können diese Informationen also frei benutzen. www.info.de will den fertigen HTML-Code liefert , den der Empfänger nur noch einbinden muss.
Der Server www.anzeige.de möchte diese Informationen jetzt anzeigen. Würde auf www.anzeige.de jetzt eine Scriptsprache laufen, wäre das alles ein Kinderspiel (CFHTTP usw...), aber es gibt dort nicht (um den Schwierigkeitslevel etwas anzuheben).
Es liegen dort nur reine HTML-Seiten. Wie also kann ein fremder Inhalt in eine HTML-Seite eingebunden werden? Es gibt div. browsereigene Tags (z.b. IFrame) die jeweils nur auf den entsprechenden Browsern arbeiten.
Um uns nicht mit Crossbrowserprogrammierung rumärgern zu müssen, benutzen wir Javascript zum Holen und Ausgeben der Inhalte von www.info.de.

Mit

<script language="Javascript"src="http://www.info.de/getInfo.js"></script>

kann aus einer HTML-Seite ein fremdes JS-Script geladen werden. Jetzt muss nur noch die Information in die eigene Seite gelangen. Das fremde JS-Script kann durch JS-Befehle beim Laden HTML-Code in die aktuelle Seite schreiben. Das geht mit:

document.writeln("Ein Wert: <b>123</b>");

Jetzt kann also das Script getInfo.js (man beachte die Endung .js) vom Server www.info.de einen HTML-Code mit eigenen Texten durch JS-Code in eine HTML-Seite vom Server www.anzeige.de einfügen.

Und was hat das jetzt mit CF zu tun? Durch CF kommt jetzt die Dynamik (wie immer) ins Spiel. Solange die .js-Datei auf dem Anbieterserver eine statische JS-Datei ist, bringt das ganze nicht viel. Aber man kann diese Datei per CF erzeugen lassen, bzw. eine CF-Datei anstelle einer JS-Datei aufrufen. Dadurch kann der Inhalt zur Laufzeit dynamisch erzeugt werden.
Zuerst ändern wir also den JS-Aufruf um, so dass eine CF-Datei aufgerufen wird:

<script language="Javascript" src="http://www.info.de/getInfo.cfm"></script>

Man beachte jetzt die Endung .CFM!
Wird dieser Code nun beim Aufruf durch den Browser ausgeführt, wird die Datei getInfo.cfm auf dem Server www.info.de ausgeführt und der zurüchgelieferte JS-Code ausgeführt.
getInfo.cfm muss also JS-Code liefern und dieser JS-Code wird im Browser ausgeführt!

Sehen wir uns jetzt getInfo.cfm im Detail an.
Die einfachste Form ist diese:

<cfcontent type="application/x-javascript">

<cfoutput>
document.writeln("<b>#now()#</b>");
</cfoutput>

Wir setzen zuerst den Contenttype für JS-Code (damit der Browser weis dass es JS-Code ist) und geben dann einen dynamisch erzeugen JS-Code aus. Im Browser kommt dann dieser Text an:

document.writeln("<b>{ts '2001-01-12 09:58:34'}</b>");

an. Der Browser führt diesen Code aus und erzeugt den HTML-Code:

<b>{ts '2001-01-12 09:58:34'}</b>

Das wäre die einfachste Form.

Jetzt gibt es noch ein paar Punkte zu beachten:
Zuerst einmal sollte die Datei getInfo.cfm möglichst nicht gecacht werden, da die Inhalte aktuell sein sollen. Das erledigen wir mit:

<CFHEADER NAME="Expires" VALUE="#now()#">
<CFHEADER NAME="Pragma" VALUE="no-cache">
<CFHEADER NAME="cache-control" VALUE="no-cache, no-store, must-revalidate">

Der Code ist ausführlich im Artikel 'Chachkontrolle' erläutert.

Weiterhin möchte man dem Script vieleicht noch Parameter übergeben. Beispielsweise könnte der Aufrufer eine Schriftfarbe übergeben wollen um so auf die Ausgabe Einfluss nehmen zu können.
Das ist kein Problem. Man gibt dann einfach einen URL-Parameter beim Aufruf von getInfo.cfm an:

<script language="Javascript" src="http://www.info.de/getInfo.cfm?font=ariel">
</script>

In getInfo.cfm gibt es dann den Parameter URL.font, mit dem man dann die Ausgabe steuern kann.

Kommen wir jetzt zum kompletten Beispiel:
Das Beispielprogramm soll zuerst das Datum und dann eine Liste mit Infos liefern. Diese könnten z.B. aus einer DB kommen, werden hier aber zufallsgesteuert erzeugt. Der Aufruf in der Anzeiger-Seite out.htm sieht wie folgt aus:

<head>
  <title>out.htm</title>
</head>

<body>
Dieser Inhalt kommt woanders her:
<table>
  <td bgcolor="cccccc">
  <script language="Javascript" src="http://anbieter.de/getList.cfm?face=Tahoma&color=00ff00">
  </script>
  </td>
</table>

Das ist wieder der eigenen Inhalt
</body>

Der Aufruf erfolgt mit den Parametern face und color für die Ausgabe des <Font>-Tags. Das ganze wird in einer Tabelle gepackt um die Ausgabe farblich einzurahmen.
Der Code in getInfo.cfm ist einfach zu verstehen:

<!--- parameter fuer font-ausgabe--->
<cfparam name="URL.face" type="string" default="Arial">
<cfparam name="URL.color" type="string" default="ff0000">

<!--- chachen deaktivieren --->
<CFHEADER NAME="Expires" VALUE="#now()#">
<CFHEADER NAME="Pragma" VALUE="no-cache">
<CFHEADER NAME="cache-control" VALUE="no-cache, no-store, must-revalidate">

<!--- contenttype fuer JS setzen --->
<cfcontent type="application/x-javascript">

<!--- Daten in HTML-Code schreiben --->
<cfoutput>

<!--- zuerst font-tag erzeugen --->
document.writeln("<font color=#URL.color# face=#URL.face#>");

<!--- dann das datum --->
document.writeln("<b>Datum: #now()#</b><br><br>");

<!--- jetzt eine schleife mit Zufallswerten --->
<cfloop index="idx" from="1" to="4">
document.writeln("Ein Wert: <b>#RandRange(111,999)#</b>");
document.writeln("<br>");
</cfloop>

<!--- und das font-tag wieder schliessen --->
document.writeln("</font>");
</cfoutput>


Steffen Goldfuß steffen@goldfuss.de - 17.01.2001

Zurück


Das deutsche ColdFusion-Forum cfml.de ist das Portal für Einsteiger und Experten zum Thema ColdFusion und der ColdFusion Markup Language (CFML).

© 2017 Webdesign & Hosting: CHC ONLINE Kassel | SOLVA Content-Management-System CMS
Urlaub-Angebote.de - Urlaub mit Bestpreis-Garantie buchen