Main Page Content
(Text-)Dateien laden mit JavaScript
Rated 3.65 (Ratings: 8) (Add your rating)
Log in to add a comment
(34 comments so far)
Want more?
- More articles in Site Development
- More articles by janwinkler
Jan Winkler
User since: November 09, 2001
Last login: November 09, 2001
Articles written: 1
Wer selbst eine Homepage hat, und diese durch interaktive Elemente beleben will, kam oder kommt bestimmt einmal auch an JavaScript vorbei. Wer dann noch nach Höherem, wie etwa einer Datenbank oder derartigen Funktionen, strebt kommt allerdings bei JavaScript schnell an seine Grenzen. Das Laden (~ Einlesen) von Text- und anderen Dateien mit JavaScript bzw. JScript ist schon seit den Urzeiten der beiden Sprachen ein Thema für sich. Da JavaScript wie auch JScript keinen direkten Zugang zum Dateisystem haben, muss nach anderen Möglichkeiten oder Tricks gesucht werden. Im folgenden sollen nun einige Lösungsansätze für dieses Problem gegeben und behandelt werden.
Das Ziel besteht dann darin (dynamisch) einen Text (quelle.***) in das Dokument (ziel.***) einzubinden und das Ergebnis für den Besucher sichtbar zu machen.
Als Grundstock wird dabei jeweils nach einer Möglichkeit gesucht, Daten in eine Variable zu laden. Diese Variable soll dann einfach nur noch in das Dokument geschrieben werden.
Die einfache Script-Variante
Eine der ältesten und zugleich einfachsten Ideen Daten in eine Variable zu laden besteht darin, die Daten einfach schon in einer Variablen zu haben und diese zu Laden. Dieser Weg ist für die meisten Anwendungen völlig ausreichend und zudem noch sehr unkompliziert.
Die Idee ist, die Daten, die später geladen werden sollen, als Werte von definierten Variablen in einer .js-Datei abzuspeichern und diese dann - sofern sie benütigt werden - in die HTML-Datei zu laden. Benütigt werden dazu also 2 Dateien: Wir nennen sie mal quelle.js und ziel.htm
Beispiel:
In quelle.js:
var Quelle = '...'
In ziel.htm:
Die dynamische Script-Variante
Um das Laden von Dateien nun noch etwas freier zu gestallten, ist es z.B. möglich, die jeweilige JavaScript-Datei dynamisch einzubinden. Dies greift auch wieder auf die erste Idee zurück, mit dem Unterschied, dass hierbei die gesamte Datei dynamisch eingebunden wird und nicht nur der Text aus einer Datei. Im folgenden Beispiel wird angenommen, dass die Text-Variable Quelle in der Datei quelle.js gespeichert ist. In der Datei wird als zusätzlicher Eintrag document.writeln(Quelle); am Ende eingefägt. Die dazugehürige HTML-Datei läd die Datei als Script ein. Durch das Laden wird auch der darin enthaltene Code ausgefährt und somit der Text geschrieben. Somit ist es quasi möglich beliebige (vorpreparierte) Dateien zu laden.
Beispiel:
In quelle.js:
var text = '...' document.writeln(text);
In ziel.htm:
document.writeln('');
Die Fenster-Variante
Eine weitere Idee, Daten in JavaScript einzulesen ist die Fenster-Variante. Die überlegung besteht darin, die einzulesende Datei in ein neues Browser-Fenster zu öffnen und dieses dann auszulesen. Das öffnen dürfte dabei kein größeres Problem darstellen. Einzig zu beachten ist, dass die Datei möglichst mit einer Dateiendung gekennzeichnet ist, die vom Browser nicht ausgefährt oder als Download herunter geladen wird. Es sollte also sichergestellt sein, dass die Datei vom Browser angezeigt wird.
Als weitaus größeres Problem stellt sich dann das Auslesen des Fensters dar. Mit Microsofts Internet Explorer geht dies relativ einfach:
Von dem geöffneten Fenster wird das document abgefragt und von diesem wiederum mit body.innerHTML oder documentElement.innerHTML der Inhalt ausgelesen. Der Unterschied der beiden liegt darin, dass mit body wirklich nur der Inhalt des Bodys ausgefragt wird, wogegen documentElement das Root-Element der Datei ausgibt. Wird beispielsweise der zu lesende Text in eine Datei mit der Endung .htm oder .html gespeichert, so bekommt er normalerweise - auch wenn er keine HTML-Formatierungen enthält - eine gewisse Grundstruktur vom Browser verliehen (wozu z.B. ein head oder ein body gehören). Diese kann man ausschalten indem nur der Body ausgefragt wird - der abgefragte Text ist jedoch (nach einigen Umwandlungen) der gleiche.
Was den Netscape Navigator oder andere Browser betrifft, so ist diese Idee weniger leicht umzusetzten.
Der Netscape Navigator bietet vor der Version 6.0 eigentlich keine Möglichkeiten den Inhalt eines Elementes oder des Dokumentes auszulesen. Ab 6.0 kann - ähnlich wie beim Internet Explorer - mit document.documentElement.innerHTML der Inhalt des Root-Elements ausgelesen werden. Den Text mit document.body.innerHTML einzulesen scheint hierbei jedoch nicht zu funktionieren.
Opera und andere Browser sind dagegen nicht wirklich dazu zu bewegen, den Inhalt auszuspucken.
Sind die Daten jedoch ersteinmal ausgeladen, müssen sie nur noch verarbeitet und das Browser-Fenster kann wieder geschlossen werden.
Beispiel :
In quelle.txt:
...
In ziel.htm:
b = 'quelle.txt'
c = window.open(b);
d = c.document.documentElement.innerHTML;
c.close();
if(d.toLowerCase().search('')+1,d.length);
}
if(d.toLowerCase().search('
Ein weiteres Problem dabei ist, dass, sobald der Ladevorgang des Fensters zu lang andauert, das Ausfragen des Fensters vielleicht keine Resultate oder einen Fehler hervorruft. Dazu empfiehlt es sich, mit Ereignissen zu arbeiten (z.B. onLoad).
Die ActiveX-Variante
Neben zahlreichen anderen Dingen - die andere Browser nicht beherrschen - hat der Internet Explorer auch die Möglichkeit auf ActiveX-Objekte zuzugreifen. Die Idee ist nun, einfach das zuständige ActiveX-Objekt FileSystemObject zu verwenden um eine Datei zu öffnen, zu lesen und den Text auszugeben.
Auch hierbei entsteht wiederum ein größeres Problem: Wird das Script beim Clienten ausgefährt, so wird eine Datei im Internet nicht gefunden und kann demnach nicht geöffnet werden. Dazu kommt noch, dass 1. der MS Internet Explorer verwendet werden muss und 2. ActiveX eingeschaltet sein muss.
Diese Variante ist eher für serverseitiges Einfägen interessant (z.B. bei ASP) - zur Anwendung im eigenen Intranet (etc.) wäre sie allerdings auch in normalen Internet-Seiten zu gebrauchen.
Beispiel:
In quelle.txt:
...
In ziel.htm:
var a = new ActiveXObject('Scripting.FileSystemObject');
c = 'quelle.txt'
d = window.location.href;
d = d.substr(0,d.lastIndexOf('/')+1);
if(d.search('file:///') != -1) {d = d.substr(d.search('file:///')+8,d.length)}
e = a.OpenTextFile(d+c, 1, false);
f = e.ReadAll();
while(f.search('\u000A') != -1){f = f.replace('\u000A','
');}
document.writeln(f);
Die Data-Binding-Variante (ActiveX Nr.2)
Eine weitere auf ActiveX basierende Idee ist Microsofts Data-Binding oder Data-Bind. Dabei werden im Internet Explorer bzw. Windows integierte ActiveX-Steuerelemente verwendet. Diese können mit dem HTML-Element object eingebunden und durch param gesteuert werden. Um Daten einzubinden wird die classid 'CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83' verwendet. Als Parameter können dazu unter anderem folgende übergeben werden:
DataURL- die zu öffnende DateiTextQualifier- zu verwendende Trennzeichen
Dem Objekt wird eine id gegeben. Innerhalb der Seite kann dann über diese id ein div-Element eingefägt werden, welches auf dieses Objekt (per datascr-Attribut) verweist. Handelt es sich bei den Daten um Text, sollte zusätzlich datafld="Text" angegeben werden. Ausserdem kann mit dataformatas="HTML" die Formatierung der Daten als HTML definiert werden.
Die zu öffnende Datei muss zusätzlich noch (um-)formatiert werden. Die erste Zeile sollte '$Text:String$' lauten, wobei $ gegen die benannten Trennzeichen (TextQualifier-Attribut) ausgetauscht werden können. Zusätzlich muss jede weitere Zeile mit diesem Trennzeichen anfangen und beendet werden.
Beispiel:
In quelle.txt:
$Text:String$ $...$
In ziel.htm:
b = 'quelle.txt'
c = '\n' +
'\n'
document.write(c);
Die Java-Variante
Ein weitere Idee besteht darin, auf Java zum Lesen der Datei zurück zu greifen. Da der Netscape Navigator in der Lage ist zwischen Java und JavaScript Kommunikation zu betreiben, können hierbei die Daten also auch mit JavaScript weiter verarbeitet werden. Der Internet Explorer unterstützt dies leider nicht - für ihn müsste der Java-Code daher in ein Applet verpackt werden. Auch hier wird die Datei vorher mit Trennzeichen und Formatierungen ausgestattet, sodass die Dateien aus der Data-Bining-Variante genutzt werden können. Folgender Code eignet sich für das auslesen von Dateien mit Java.
Beispiel:
In quelle.txt:
$Text:String$ $...$
In ziel.htm:
function Einlesen(FileName, Trennzeichen)
{
a = self.location.pathname;
a = a.substring(0, a.lastIndexOf('/')+1);
b = new java.net.URL(self.location.protocol.split(':').join(''), self.location.host, a + FileName);
c = new java.io.BufferedReader(new java.io.InputStreamReader(b.openStream()));
d = c.readLine();
while((d = c.readLine()) != null)
{e += d + ' '}
c.close();
e = e.split(Trennzeichen).join('');
return(e);
}
if (document.layers && navigator.javaEnabled())
{
document.writeln(Einlesen('quelle.txt', '$'));
}
Alternativen zu JavaScript
Zwar werden die beschriebenen Ideen für die meisten einfachen JavaScript-/Homepage-Bastler völlig ausreichend sein, dennoch ist keine wirklich professionelle Lösung mit JavaScript bzw. Jscript zu erreichen. Für die meisten Anwender wird sich demnach das Augenmerk eher auf eine andere Sprache richten.
Nützlich dafür sind serverseitige Sprachen wie PHP oder ASP. Der Vorteil liegt dabei klar auf der Hand: Da der Client vom Server nur die Resultate des Einbindens bekommt, ist es egal, was für einen Browser er hat und es funktioniert immer. Eine mögliche PHP-Umsetzung zum Einbinden einer Textdatei wäre zum Beispiel:
In quelle.txt:
...
In ziel.php:
Fazit
Letztlich sollte jeder selbst sehen, was für seine Bed�rfnisse am Besten und ausreichend professionell genug ist. PHP oder ASP bieten sicherlich die beste Möglichkeit, wobei - je nach Anwendung - auch einfache JavaScript-Varianten durchaus ihren Dienst tun können.
PS: Dank an Andreas Zierhut (http://www.dhtml-now.de / http://www.dhtml-now.de/javascr/sonstiges/externedatei.asp) .
