Dateien laden mit Javascript
Die besten Tipps und Kniffe rund um Javascript

Einfache Skript-Variante

Dateien laden mit Javascript

Das Ziel besteht dann darin, dynamisch einen Text in ein Dokument 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.

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 in die HTML-Datei zu laden. Benötigt werden dazu also zwei Dateien: Wir nennen sie quelle.js und ziel.htm. Dabei steht in quelle.js

var Quelle = 'Textdateien laden mit JavaScript!';

und in ziel.htm:

Um das Laden von Dateien nun noch etwas freier zu gestallten, ist es zum Beispiel 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-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ädt die Datei als Skript ein. Durch das Laden wird auch der darin enthaltene Code ausgeführt und der Text geschrieben. Somit ist es quasi möglich, beliebige Dateien zu laden, wie das folgende Beispiel zeigt:

// quelle.js:
var text = 'Textdateien laden mit JavaScript!';
document.writeln(text);
// ziel.htm:
document.writeln('');

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 heruntergeladen 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 dem DOM entspricht, 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 drei Browser circa 90 bis 95 Prozent des gesamten Browsermarktes ausmachen, sollte die Lösung also recht praktikabel sein. Sind die Daten erst einmal ausgelesen, müssen sie nur noch verarbeitet werden, und das Browser-Fenster kann wieder geschlossen werden:

// In quelle.htm:


Textdateien laden mit JavaScript!

// In ziel.htm:
b = 'quelle.htm';
c = window.open(b);
d = c.document.getElementsByTagName
( 'body')[0].innerHTML;
c.close();
document.writeln(d);


Ein Problem dabei ist, dass, sobald der Ladevorgang des Fensters zu lang dauert, das Ausfragen des Fensters vielleicht keine Resultate oder einen Fehler hervorruft.

Die ActiveX-Variante

Dateien laden mit Javascript

Der Internet Explorer kann auf ActiveX-Objekte zugreifen. 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 Skript beim Client ausgeführt, so wird eine Datei im Internet nicht gefunden und kann demnach nicht geöffnet werden. Dazu kommt noch, dass der Internet Explorer verwendet werden muss und ActiveX eingeschaltet sein muss. Diese Variante ist eher für serverseitiges Einfügen interessant. Zur Anwendung im eigenen Intranet 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

Dateien laden mit Javascript

Eine weitere auf ActiveX basierende Idee ist Microsofts Data-Binding oder Data-Bind. Dabei werden im Internet Explorer beziehungsweise in Windows integrierte ActiveX-Steuerelemente verwendet. Diese können mit dem object-Element eingebunden und durch Parameter gesteuert werden. Um Daten einzubinden, wird die CLASSID mit der Kennung CLSID:333C7BC4-460F-11D0-BC04-0080 C7055A83 verwendet. Als Parameter können dazu unter anderem DataURL für die zu öffnende Datei und TextQualifier für zu verwendende Trennzeichen übergeben werden.

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. Außerdem kann mit dataformat
die Formatierung der Daten als HTML definiert werden.

Die zu öffnende Datei muss zusätzlich noch umformatiert werden. Die erste Zeile sollte $Text:
String$ lauten, wobei $ gegen die im TextQualifier-Attribut benannten Trennzeichen 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!$
// In ziel.htm:
b = 'quelle.txt';
c = '\n' + '