(Text-)Dateien laden mit JavaScript
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 Sprache ein Thema für sich. Da JavaScript /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.Ziel des Artikels
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 = 'Textdateien laden mit JavaScript!';
In ziel.htm:<script src="quelle.js"></script>
<script>
<!--
document.writeln(Quelle);
//-->
</script>
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 - allerdings 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-VariableQuelle in der Datei quelle.js gesperichert ist (siehe oben). 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 = 'Textdateien laden mit JavaScript!';
document.writeln(text);
document.writeln('<script src="quelle.js"></script>');
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-Objekt abgefragt und von diesem wiederum mit getElementsByTagName('body')[0].innerHTML der Inhalt des body-Elements. Da diese Schreibweise demDOMentspricht, wird sie sowohl vom MSIE ab 5.0 als auch von Netscapes 6er Versionen und Operas Browsern ab Version 7.0 unterstützt. Da diese 3 Browser ca. 90-95% des gesamten Browsermarktes ausmachen, sollte die Lösung also recht praktikabel sein. Leider ist Netscapes 4er Browser dagegen nicht wirklich dazu zu bewegen, den Inhalt auszuspucken.
Sind die Daten ersteinmal ausgelesen, müssen sie nur noch verarbeitet werden und das Browser-Fenster kann wieder geschlossen werden.
Beispiel:
In quelle.htm:
<html>
<head></head>
<body>Textdateien laden mit JavaScript!</body>
</html>
b = 'quelle.htm';
c = window.open(b);
d = c.document.getElementsByTagName('body')[0].innerHTML;
c.close();
document.writeln(d);
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-ObjektFileSystemObject 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 Dokumenten zu gebrauchen.
Beispiel:
In quelle.txt:
Textdateien laden mit JavaScript!
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','<br>');}
document.writeln(f);
Die Data-Binding-Variante
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 demobject-Element eingebunden und durch Parameter gesteuert werden. Um Daten einzubinden wird die CLASSID mit der Kennung CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83 verwendet. Als Parameter können dazu unter anderem folgende übergeben werden:
-
DataURL- die zu öffnende Datei -
TextQualifier- zu verwendende Trennzeichen
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. außerdem 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$
$Textdateien laden mit JavaScript!$
b = 'quelle.txt';
c = '<OBJECT ID="meinObj" WIDTH="0" HEIGHT="0" '+
'CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">n' +
' <PARAM NAME="DataURL" VALUE="' + b + '">n' +
' <PARAM NAME="TextQualifier" VALUE="$">n' +
' <PARAM NAME="FieldDelim" VALUE="|">n' +
' <PARAM NAME="UseHeader" VALUE="true">n' +
'</OBJECT>n' +
'<div datasrc="#meinObj" datafld="Text" dataformatas="HTML"></div>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 direkte Kommunikation innerhalb vonscript-Bereichen 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$
$Textdateien laden mit JavaScript!$
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:
Textdateien laden mit JavaScript!
In ziel.php:<script language="PHP">
echo "<script>n";
echo "var Quelle = '";
include "quelle.txt";
echo "';";
echo "</script>n";
</script>
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.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project