SELFHTML aktuell  Artikel  JavaScript
	Auf Dateien mit JavaScript zugreifen
	Daniel Thoma  Problem  Lösungsansätze  Lösung ohne Applet  Lösung mit Applet  Wie funktioniert das Applet  Das Applet downloaden

Daniel Thoma

E-Mail:	dthoma@gmx.net
Homepage-URL:	http://www.geocities.com/thomaware/

Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!

Problem

Mit JavaScript kann man allerdings keine Dateien öffnen. Oft wünscht man sich aber, per JavaScript auf Dateien zugreifen zu können, z.B. um Konfigurationsdateien für eine Navigationsleiste einlesen zu können oder um den Quellcode einer Datei nach einem gewissen Begriff zu durchsuchen.
Wie kann man diese Problem dennoch lösen ohne SSI, CGI oder ähnliches nutzen zu müssen?

Lösungsansätze

Mit Java gibt es die Möglichkeit Dateien zu öffnen, die im selben Verzeichnis (oder Unterverzeichnis) wie das Java-Applet liegen. Im Netscape Navigator kann man Java ganz einfach von Javascript aus nutzen.
Einen Text auf der Standartausgabe könnte man auf diese Weise zum Beispiel so ausgeben:

Der Microsoft Internet Explorer akzeptiert deratige Befehle so allerdings nicht. Der direkte Zugriff auf Javaclassen zugreifen ist nicht erlaubt im Microsoft Internet Explorer, aber immerhin gibt es Methoden, Java-Applets aufrufen. Deswegen werden hier zwei Lösungen vorgestellt.
Für beide Lösungen müssen sowohl JavaScript als auch Java im Browser aktiviert sein.

Unterschied zwischen Java und Javascript
Ich gehe davon aus, dass JavaScript bekannt ist. Java ist eine Programmiersprache, mit der man lauffähige Programme (z.B. Textverarbeitungsprogramme) schreiben kann. Java-Code wird gegenüber JavaScript nicht zur Laufzeit interprefiert, sondern muß vor dem Ausführen compiliert werden. Viele die Applets, die man auf Websites sieht, sind mit Java geschrieben worden.

Lösung ohne Applet

Anzeigebeispiel: So sieht's aus

Diese Lösung ist, wenn man kein Java kann flexibler, aber funktioniert leider nur mit dem Netscape Navigator.

function readFile(file)
    {
    var source = "";
    var url = new java.net.URL(new URL(window.location.href),file);
5:  var stream = new java.io.DataInputStream(url.openStream());
    var line    = "";
    while ((line = stream.readLine()) != null)
        {
        source += line + "\n";
10:     }
    stream.close();
    return source;
    }

Achtung: Die Zeilennummern gehören nicht zum Code. Wenn Sie den Code benutzen, diese löschen.

In Zeile 4 wird ein neues Url-Objekt erzeugt. Das Objekt representiert das zu ladende Dokument, das nun verarbeiten werden soll.
Mit new URL(window.location.href) wird ein solches Objekt für das geladene Dokument erzeugt.
Dann wird eine URL-Objekt für "file" (also die URL, die man der Funktion "readFile" übergeben hat) erzeugt. Das URL-Objekt für das geladene Dokument wird nun als eine Art Vorlage verwendet.
Alle Angaben, die bei der übergebenen Url fehlen (z.B. Protokoll, Domain, etc.) werden übernommen.
Wenn beispielsweise das geladene Dokument die URL "http://www.domain.com/dir/load.html" hat, und nur "file.txt" übergeben wird, dann wird "http://www.domain.com/dir/" übernommen.

In Zeile 5 wird die Verbindung aufgebaut.
Mit url.openSteam() wird die Datei geöffnet. Es wird mit ein DataInputStream-Objekt erzeugt. Dies ermöglicht das einfachere Einlesen der Datei.

In Zeile 6 wird eine neue Variable deffiniert. Die Variable dient dazu eine Zeile der Datei aufzunehmen.

In Zeile 7 wird eine Schleife gestartet. Die Schleife liest die Datei zeilenweise bis zum Ende ein.
Mit (line = stream.readLine()) wird eine Zeile eingelesen und in der Variable "line" gespeichert. Ist das Dateiende erreicht, wird "null" zurückgegeben. Mit != null wird abgefragt, ob das Dateiende noch nicht erreicht ist.

In Zeile 9 wird die Zeile an die Variable "source" angehängt, der so nach und nach der gesamte Dateiinhalt zugewiesen wird.

In Zeile 11 wird die Verbindung zur Datei geschlossen.

In Zeile 12 wird der Dateiinhalt zurückgegeben.

Wenn Sie diese Funktion in ihre Seite kopieren, können Sie ganz einfach mit var datei = readFile(url) den Dateiinhalt einer auf dem Server liegenden Datei auslesen.
Dazu müssen sie obigen Code im Head-Bereich in einem Script-Bereich einfügen.

Lösung mit Applet

Anzeigebeispiel: So sieht's aus

Diese Lösung funktioniert auch mit dem Microsoft Internet Explorer und anderen Browsern. Sie hat allerdings den Nachteil, das man sie ohne Javakenntnisse nicht für eigene Zwecke modifizieren kann.
Ich habe deshalb mehrere Methoden zum Lesen von Dateien implementiert.

Das Beispiel

    <html>
    <head>
    <script>
    function read(file)
5:  {
    var source = "";
    document.fileopener.setFile(window.location.href,file);
    source = document.fileopener.getFile();
    return source;
10: }
    </script>
    </head>
    <body>
    <applet code="JSfileopener.class" width="1" height="1" mayscript name="fileopener">
15: <PARAM name="color" value="#000000">
    </applet>
    </body>
    </html>

Achtung: Die Zeilennummern gehören nicht zum Code. Wenn Sie den Code benutzen, diese löschen.

Das Applet:
Das Applet (Zeilen: 14 - 16) ist 1px x 1px groß und ist damit in der Seite praktisch unsichtbar. Die Anzeige paßt sich übrigens automatisch der Hintergrundfarbe der Seite an. Alternativ kann man Kann man die Hintergrundfarbe aber auch mit dem Parameter "color" angeben. Mit Hilfe von CSS kann man das Applet leider nicht unsichtbar machen. Der Netscape Navigator verweigert in diesem Fall die Zusammenarbeit. Prinzipiell können sie das Applet überall auf der Seite platzieren.

Der JavaScript-Code:
Mit document.appletname kann man mit JavaScript auf Applets innerhalb der selben Seite zugreifen.
In Zeile 7 wird die Methode "setFile()" aufgerufen, mit der der URL bestimmt wird.
Der erste Übergabeparameter bestimmt den URL des geladenen Dokuments, der als eine Art Vorlage verwendet wird. Der zweite Übergabeparameter gibt die zu verarbeitende Datei an. Alle hierbei fehlenden Angaben wie z.B. Protokoll, Domain, etc. werden vom ersten übernommen.
In Zeile 8 wird die Datei von der Methode "getFile()" komplett eingelesen und dann automatisch geschlossen.
In Zeile 9 wird der Dateiinhalt zurückgegeben.

Was das Applet sonst noch kann.

Das Applet unterstützt noch andere Methoden:

setFile(String url)
An setFile müssen nicht zwei Parameter übergeben werden. Ein Parameter reicht aus. Dieser muß allerdings ein kompletter URL sein. (z.B. http://www.domain.com/dir/test.html)

readFile()
Mit dieser Methode können sie die Datei zeilenweise einlesen. Das ist sinnvoll, wenn man alle Zeilen in einen Array einlesen oder einige Zeilen überspringen will. Das folgende Beispiel nutzt diese Methode. Es ließt alle Zeilen ein, bis "null" zurückgegeben wird.

var source = "";
var line   = "";
while ((line = document.fileopener.readFile()) != null)
{
    source += line + "\n";
}

setBgcolor(String color)
Ändert die Hindergrundfarbe des Applets. (Etwas wie "#000000" übergeben)

Wie funktioniert das Applet

Dieser Abschnitt erfordert Javakenntnisse.

import java.applet.*;
import java.awt.*;
import netscape.javascript.JSObject;
import java.net.URL;
import java.io.*;

public class JSfileopener extends Applet
{
1   public String bgcolor;
    public DataInputStream stream;

    public String getAppletInfo()
    {
        return "Name: JS Fileloader\n" +
        "Author: Daniel Thoma" +
        "E-Mail: dthoma@gmx.net";
    }

    public String[][] getParameterInfo()
    {
        String[][] info =
        {
            {"color","color","something like #ff00ab"}
        };
        return info;
    }

2   public void init()
    {
        bgcolor = getParameter("color");
        if(bgcolor == null)
        {
            bgcolor = ((JSObject)JSObject.getWindow(this).getMember("document")).getMember("bgColor").toString();
        }
    }

3   public void paint(Graphics g)
    {
        g.setColor(Color.decode(bgcolor));
        Rectangle r = g.getClipBounds();
        g.fillRect(r.x, r.y, r.width, r.height);
    }

    public void setBgcolor(String colorvalue)
    {
        bgcolor = colorvalue;
        repaint();
    }

4   public void setFile(String master, String file) throws IOException
    {
        URL url = new URL(new URL(master), file);
        stream = new DataInputStream(url.openStream());
    }

    public void setFile(String file) throws IOException
    {
        URL url = new URL(file);
        stream = new DataInputStream(url.openStream());
    }

5   public String readFile() throws IOException
    {
        String line    = "";
        if((line = stream.readLine()) != null)
        {
            return line;
        }
        else
        {
            stream.close();
            return null;
        }
    }

6   public String getFile() throws IOException
    {
        String source    = "";
        String line;
        while((line = readFile()) != null)
        {
            source += line +"\n";
        }
        return source;
    }
}

Achtung: Die Zeilennummern gehören nicht zum Code. Wenn Sie den Code benutzen, diese löschen.

1: bgcolor enthält die Hintergrundfarbe des Applets; stream ist der InputStream zum Lesen der Dateien

2: Mit getParameter() wird zuerst der Parameter für die Farbe eingelesen. Wenn er nicht definiert ist, wird die Hintergrundfarbe der Seite genommen. Dazu werden JavaScript-Methoden verwendet.

3: paint() füllt das Applet mit der Hintergrundfarbe.

4: Hier wird ein neues URL-Objekt erzeugt (mit Standardurl) und dann ein DataInputStream zum einfacheren Einlesen der Datei erzeugt. Der DataInputStream erlaubt das zeilenweise einlesen der Datei.

5: readFile() liest eine einzelne Zeile ein. Bei Erreichen des Dateiendes wird der DataInputStream und damit die Datei geschlossen

6: getFile() ruft readFile() so oft aus, bis alle Zeilen der Datei eingelesen sind.

Das Applet downloaden

  Das Beispiel als Zip-Datei
 Nur der Sourcecode

  SELFHTML aktuell  Artikel  JavaScript

© 2007  Impressum