HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » JavaScript » JavaScript Artikel » (Text-)Dateien laden mit JavaScript

JavaScript Artikel: (Text-)Dateien laden mit JavaScript

von Jan Winkler

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.

Anzeige

Ziel des Artikels  nach oben

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  nach oben

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  nach oben

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-Variable Quelle 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); 

In ziel.htm:

document.writeln('<script src="quelle.js"></script>');

Die Fenster-Variante  nach oben

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>

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 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  nach oben

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 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  nach oben

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 object-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

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$
$Textdateien laden mit JavaScript!$ 

In ziel.htm:

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  nach oben

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 von script-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!$

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  nach oben

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  nach oben

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.



« zurück weiter »
Bewerten

Aus dem JavaScript Artikel Forum ...

zum JavaScript Artikel Forum »

 

JavaScript Artikel

.Autor:Jan Winkler.
. Bewertung:
JavaScript Artikel: (Text-)Dateien laden mit JavaScript HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 24 Beiträge im JavaScript Artikel Forum .

Navigation

Software - Entwickler (m/w) Java / GIS – Stuttgart von Job Ambition GmbH
PHP - Entwickler (m/w) - Standort Köln von Job Ambition GmbH
PHP - Entwickler (m/w) - Offenbach am Main von Job Ambition GmbH
Web-Developer (m/w) – am Standort Bühl von Job Ambition GmbH
[B] Individuelle Texterstellung – Unique Content zu fairen P von texttown
Senior PHP-Programmierer (m/w) – Raum Köln von Job Ambition GmbH
html-Datei in Container nachladen von Piwi
Wie ticken Web-Entwickler eigentlich im Social Web? von Job Ambition GmbH
Gesucht: Senior PHP-Programmierer (m/w) – am Standort Köln von Job Ambition GmbH
Achtung: Seite ist nicht mehr gültig von Sir Quicksand
Excel-Spalte auslesen in txt. speichern. von n_o.o_ b
(Junior) Java Entwickler (m/w) - am Standort Stuttgart von Job Ambition GmbH
Stellen hinter dem Komma Abfragen und ändern. von Beckers
Re: Undefined variable - bitte um Hilfe von admin
Wie erstelle ich eine Tag-Wolke aus Flash? von Suesse_Muse

zum Forum »


 
     
 

Anzeige