Text aus externer Textdatei einfügen und Darstellung ändern?

[Roadster]

Hallo!

Ich habe mal eine Frage zum Einbinden von Text aus einer externen Textdatei.

Mein Ziel ist es, dass ich die Texte auf meiner Website ohne in den Quellcode
eingreifen zu müssen, über den Windows-Editor bearbeiten kann, dass sie also
als externe .txt - Dateien im Verzeichnis verfügbar sind.

Die Umsetzung hat grundsätzlich auch geklappt, indem ich an entsprechender
Stelle im HTML-Code folgendes schrieb:

<div>
<object id="text1" data="content/text/text1.txt" type="text/plain"></object>
</div>

Der Text aus der externen .txt - Datei wird also auf der Seite angezeigt.
So weit, so gut.

Aber: Das Problem besteht nun darin, dass der angezeigte Text freilich
nicht in der Schriftart und -größe ist, wie ich ihn gerne hätte.

Zunächst hatte ich also versucht, #text1 in CSS entsprechend zu bearbeiten,
aber was ich da unter font-family bzw font-size geschrieben habe, wird
natürlich ignoriert (da object =/= p wie ich annehme).

Dann habe ich im Windows-Editor einfach eine andere Schriftart und -größe
bei der Ausgangsdatei text1.txt eingestellt. Aber das hat auch nicht geklappt:

Auf der Website wird der Text immer in Times New Roman Gr.10 oder so angezeigt
(glaube ich zumindest).

Wie kann ich das ändern und als Ausgabe - sagen wir Arial Gr.14 - bestimmen?

Oder ist mein dilettantischer Versuch zur Umsetzung meines Vorhabens ohnehin
ungeeignet?

Über euren Rat würde ich mich wie immer sehr freuen!

Dank im Voraus und Gruß,

Roadster.

[JürgenB]

Hallo Roadster,

<div>
<object id="text1" data="content/text/text1.txt" type="text/plain"></object>
</div>

du bindest eine unformatierte Textdatei ein, was du siehst ist das Aussehen deines Default-Textbetrachtungsprogramms.

Mir fallen hier zwei Lösungen ein:

1. Du verwendest irgendeine Serverseitige Technik, z.B. Server Side Includes (SSI).

2. Du lädst die Textdatei mit Javascript nach und baust den Inhalt in die Seite ein. Stichwort "AJAX" bzw. "HTTP-Request".

Nachteil von 1): Wird nicht von allen (Billig-)Anbietern unterstützt.

Nachteil von 2): Ohne Javascript kommt nichts.

Gruß, Jürgen

PS Noche eine Idee, ohne das geprüft zu haben:
Nimm statt text/plain mal text/html.

[Roadster]

Hallo Jürgen,

danke schonmal für die Antwort!

Also mir als Anfänger ist nicht so ganz klar, was du mit "serverseitiger Technik"
meinst, aber die Seite an der ich sitze, wird auf unbestimmte Zeit ohnehin nur
offline verwendet - also von den Benutzern schlicht durch öffnen der html-Datei
aufgerufen, von daher gehe ich mal davon aus, dass ich diese Wissenslücken zu
einem späteren Zeitpunkt schließen kann.
(Die Seite beinhaltet gewissermaßen ein Lernprogramm für mein Studienfach...)

Was die Idee mit dem "text/html" statt "text/plain" angeht: Das macht überhaupt
keinen Unterschied. - Genau genommen ist es für das derzeitige Endergebnis sogar
egal, ob ich überhaupt eine Bestimmung mit type="" mache, oder die Zeile einfach
komplett raus lasse und nur data="" da stehen habe.

Die Sache mit Javascript scheint mir am vielversprechendsten zu sein. Ohne script
läuft auf meiner Seite ohnehin gar nichts, da ich praktisch alle Gestaltungen mit
CSS gemacht habe und die komplette Seitensteuerung über JS läuft.

Im Moment denke ich bei AJAX nur an Reinigungsmittel oder einen holländischen
Fußballverein, aber ich werde mich da mal schlau machen!

Nochmal Danke!

Gruß,

Roadster.

[JürgenB]

Hallo Roadster,

beachte bitte zwei Probleme bei Offline-HTTP-Requests:

1. In den Beispielen und Tutorials wird der Request-Status auf 200 geprüft, das ist der Statuscode für erfolgreiche Datenübertragung. Dieser Status wird aber vom Server geliefert, ohne Server kommt da nie eine 200. Daher musst du hier (alternativ) auf 0 prüfen. Das wirst du jetzt noch nicht verstehen, aber wenn du dich durch die Tutorials durchgeackert hast, sollte es klar sein. Ich habe übrigens hier gelernt: https://developer.mozilla.org/de/docs/AJAX/Einführung.

2. Immer mehr Browser unterstützen HTTP-Requests nicht mehr offline, z.B. Google Chrome und IE11.

Gruß, Jürgen

[Roadster]

Hi Jürgen,

nochmal Danke für den Tip und den Link und so, aber ich muss sagen, dass ich
echt nicht die Zeit habe, mich da komplett durchzuackern, d.h. wenn es für mein
Vorhaben keine simple Standard-Lösung gibt, die ich anwenden kann, dann muss
ich den Text halt doch ins HTML schreiben und gegebenenfalls ein externes HTML
Dokument mit iframe einfügen. Wäre zwar suboptimal, aber sonst sehe ich nicht,
wie ich da in absehbarer Zeit eine Lösung finden könnte. :-(

Gruß,

Roadster.

[Matthias Apsel]

Om nah hoo pez nyeetz, Roadster!

Wie in Word-Dokumenten auch braucht man in diesem Antwortformular keine Zeilenunbrüche per Hand zu setzen. Wenn eine Zeile voll ist, wird automatisch in die nächste gesprungen.

Ich weiß, es hilft dir nicht …

Matthias

[hotti]

hi,

Die Sache mit Javascript scheint mir am vielversprechendsten zu sein. Ohne script
läuft auf meiner Seite ohnehin gar nichts, da ich praktisch alle Gestaltungen mit
CSS gemacht habe und die komplette Seitensteuerung über JS läuft.

Es gibt eine JS-Library damit kannst Du Textdateien mit require einbinden (require.js und Plugin text.js). Die Dateiinhalte stehen dann dem JS als Strings zur Verfügung.

MfG

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Es gibt eine JS-Library damit kannst Du Textdateien mit require einbinden (require.js und Plugin text.js). Die Dateiinhalte stehen dann dem JS als Strings zur Verfügung.

require.js ist in erster Linie ein Module-Loader. Eine Art Paket-Manager für umfangreiche JavaScript-Projekte. Die Aufgabe eines Module-Loaders ist (wie der Name unschwer vermuten lässt) das Laden von Modulen. Module sind gekapselte Unterprogramme, die getrennt voneinander entwickelt werden können und die selber von anderen Modulen abhängen können. Diese Abhängigkeiten aufzulösen ist eine wichtige Aufgabe eines Module-Loaders.

In zweiter Linie kann man require.js auch als Kanonenkugel missbrauchen, um zum Beispiel auf Spatzen zu schießen.

Mit JavaScript einen Text vom Server zu laden ist jedenfalls keine große Aufgabe:

// Ungetestet  
var request = new XMLHttpRequest();  
request.open("get","/example.txt");  
request.send();  
request.addEventListener("load", function ( e ) {  
   var text = e.target.responseText;  
});

[Roadster]

Hallo 1UnitedPower,

vielen Dank für die Antwort!

Mit JavaScript einen Text vom Server zu laden ist jedenfalls keine große Aufgabe:

// Ungetestet

var request = new XMLHttpRequest();
request.open("get","/example.txt");
request.send();
request.addEventListener("load", function ( e ) {
   var text = e.target.responseText;
});

>   
  
  
Für jemanden wie mich, der von javascript keine Ahnung hat, ist alles eine große Aufgabe...  
  
Also ich habe deinen code mal in einer Test-Seite ausprobiert und, tatsächlich, er läd den Text aus der txt-file ins script (was im Browser dann sofort "Syntax-Error" hervorruft).  
  
Wenn ich das richtig nachvollziehe, ist der Text aus der Datei jetzt quasi die Variable "text".  
(Entschuldige bitte mein amateurhafte Ausdrucksweise...)  
  
Wie schaffe ich es nun, dass dieser auch auf der Seite dargestellt wird?  
  
Nehmen wir an, ich habe in html ein <div>-Element namens #textbox angelegt, mit CSS daraus eine 700\*350px große Box gemacht, und nun will ich, dass der Text darin angezeigt wird, wenn man darauf clickt, oder wenn sie geladen wird, whatever, wie stelle ich das an?  
  
Ich meine "text" ist ja kein Objekt, dass ich, etwa mit .style.display = "block", zum Erscheinen bringen kann!?  
  
  
Gruß,  
  
Roadster.

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Für jemanden wie mich, der von javascript keine Ahnung hat, ist alles eine große Aufgabe...

Also ich habe deinen code mal in einer Test-Seite ausprobiert und, tatsächlich, er läd den Text aus der txt-file ins script (was im Browser dann sofort "Syntax-Error" hervorruft).

Also das Code-Snippet, das ich hier vorgestellt habe, hat eigentlich keinen Syntax-Fehler, habe es gerade dann doch nochmal getestet. Was sagt denn der Browser, in welcher Zeile der Syntax-Fehler sein soll und was steht dort?

Wenn ich das richtig nachvollziehe, ist der Text aus der Datei jetzt quasi die Variable "text".
(Entschuldige bitte mein amateurhafte Ausdrucksweise...)

Deine Ausdrucksweise ist gar nicht so übel, wie du glaubst.

Wie schaffe ich es nun, dass dieser auch auf der Seite dargestellt wird?

Dafür musst du den Text noch in die bestehende Seite einfügen, am einfachsten gehst du vor, indem du dem entsprechenendem Ziel-div eine id gibst und dann folgenden Code ausführst:

document.getElementById("#ziel-div").innerHTML = text;

Ich meine "text" ist ja kein Objekt, dass ich, etwa mit .style.display = "block", zum Erscheinen bringen kann!?

Genau "text" ist nur eine Variable. Deren Inhalt musst du irgendwie das DOM einfügen. Das DOM (Document Object Model) ist die interne Rerpäsentation deines HTML-Codes. Während HTML-Quelltext etwas Statisches ist, das man nach dem Schreiben nicht mehr dynamisch ändern kann, ist das DOM eine Schnittstelle die eben genau das erlaubt.

[Roadster]

Hi nochmal!

Also das Code-Snippet, das ich hier vorgestellt habe, hat eigentlich keinen Syntax-Fehler, habe es gerade dann doch nochmal getestet. Was sagt denn der Browser, in welcher Zeile der Syntax-Fehler sein soll und was steht dort?

Ich habe jetzt mal folgendes ausprobiert:

  
var testbox = document.getElementById("testbox");  
  
var request = new XMLHttpRequest();  
  
request.open("get","beispieltext.txt");  
  
request.send();  
  
request.addEventListener("load", function( e ) {  
  
var text = e.target.responseText;  
  
testbox.innerHTML = text;  
  
});

Das führt tatsächlich dazu, dass der Text (sogar in der für das HTML-Dokument via CSS festgelegten Einstellung für die Schriftart und -größe!!!) in der Box dargestellt wird.

Das was mir in der Web-Konsole meines Firefox-Browsers als Syntax-Error anzeigt ist auch nicht in deinem Code, sondern der Text aus der Text-Datei selbst.

Normalerweise wenn ich mich im script vertippt habe und ein syntax-error angezeigt wird, weil ich eine Klammer oder so vergessen habe, dann clicke ich in der Web-Konsole ganz rechts auf die Zeilen-Angabe und es öffnet sich ein Fenster mit dem Code.

Jetzt wird da der "beispieltext.txt" aufgerufen (Fehler soll gleich in Zeile 1 sein), also ein Fenster mit dem Inhalt der Textdatei, nicht jedoch der script-code selbst.

Irgendwie denkt der Browser wohl, dass der Inhalt der Textdatei auszuführender js-code sei!

Gruß,

Roadster.

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Das was mir in der Web-Konsole meines Firefox-Browsers als Syntax-Error anzeigt ist auch nicht in deinem Code, sondern der Text aus der Text-Datei selbst.

Mein Fehler. Mit .innerHTML veranlasst man den Browser dazu den String als HTML zu intepretieren. .textContent wäre die richtige Eigenschaft gewesen.

[Roadster]

Hey,

Das was mir in der Web-Konsole meines Firefox-Browsers als Syntax-Error anzeigt ist auch nicht in deinem Code, sondern der Text aus der Text-Datei selbst.

Mein Fehler. Mit .innerHTML veranlasst man den Browser dazu den String als HTML zu intepretieren. .textContent wäre die richtige Eigenschaft gewesen.

sicher?

Habe gerade .innerHTML gegen .textContent ausgetauscht und das Ergebnis im Browser ist exakt dasselbe:

Der Text wird richtig angezeigt, aber in der Web-Konsole erscheint ein Syntax-Fehler (genau das Gleiche wie bei .innerHTML - "beispieltext.txt:1").

Gruß,

Roadster.

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

sicher?

Nicht sicher, dass es genau der Fehler war, der zu dem Syntax-Fehler geführt hat, aber es war auf jeden auch Fall EIN Fehler.

Habe gerade .innerHTML gegen .textContent ausgetauscht und das Ergebnis im Browser ist exakt dasselbe:

Der Text wird richtig angezeigt, aber in der Web-Konsole erscheint ein Syntax-Fehler (genau das Gleiche wie bei .innerHTML - "beispieltext.txt:1").

Zeig ruhig mal was mehr Code, sonst kommen wir hier nicht weiter.

[Roadster]

Ahoi.

Zeig ruhig mal was mehr Code, sonst kommen wir hier nicht weiter.

et voilà:

HTML:

  
<!DOCTYPE HTML>  
<html lang="de-formal">  
 <head>  
  <title>testsite</title>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta http-equiv="expires" content="0">  
   <meta name="viewport" content="width=device-width,  
               initial-scale=1.0, user-scalable=yes">  
   <meta name="author" content="Roadster">  
   <meta name="description" content="testsite">  
  <link rel="stylesheet"  
	href="testcss.css">  
 </head>  
 <body>  
  <div id="testbox">  
  </div>  
  <script type="text/javascript"  
	  src="testjs.js">  
  </script>  
 </body>  
</html>

CSS:

  
html  
{background: linear-gradient(90deg, #3C5064, #7092BE);  
 font-family: Helvetica, Arial, sans-serif;}  
  
#testbox  
{display: block;  
 position: relative;  
 width: 700px;  
 height: 330px;  
 border: 2px solid black;  
 border-radius: 5px;  
 margin-top: 100px;  
 margin-left: auto;  
 margin-right: auto;  
 margin-bottom: auto;  
 padding: 20px;  
 background: #C0C0C0;  
 background: linear-gradient(#C0C0C0 0%, #828282 100%);}  

JS:

  
var testbox = document.getElementById("testbox");  
  
  
testbox.addEventListener("click", showtext);  
  
function showtext(){  
  
var request = new XMLHttpRequest();  
  
request.open("get","beispieltext.txt");  
  
request.send();  
  
request.addEventListener("load", function( e ) {  
  
var text = e.target.responseText;  
  
testbox.textContent = text;  
  
})};  

Ist ja nur eine Testseite...

Gruß,

Roadster.

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Zeig ruhig mal was mehr Code, sonst kommen wir hier nicht weiter.

et voilà:

Hab den Code bei mir getestet und kann den Syntax-Fehler nicht nachvollziehen. Irgendwas machst du noch anders.

[Roadster]

Ho.

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Zeig ruhig mal was mehr Code, sonst kommen wir hier nicht weiter.

et voilà:

Hab den Code bei mir getestet und kann den Syntax-Fehler nicht nachvollziehen. Irgendwas machst du noch anders.

Aber was?

Habe den Code doch exakt 1:1 rüberkopiert.

Am Inhalt der "beispieltext.txt" kann es ja auch schlecht liegen, da sind ja nur ein paar Zeilen Text drin, keine Klammern oder Sonderzeichen, nur Buchstaben, Punkt und Komma.

Habe gerade den Code aus meinem letzten Post hier im Forum wieder zurückkopiert und die html-Datei im Firefox geöffnet und es ist genau der gleiche Effekt:

Ich clicke auf die Box und der Text aus der txt-Datei erscheint, aber in der Web-Konsole wird
Syntax-Fehler angezeigt: "beispieltext.txt:1" und wenn ich draufclicke wird ein Fenster geöffnet, wo kein JS-Code, sondern nur und ausschließlich der Inhalt der .txt-Datei drin ist.

Kann es vielleicht an irgendeiner Browsereinstellung liegen?

Und vielleicht ist der "Fehler" ja auch unbeachtlich, denn moniert wird ja nur die .txt-Datei, nicht aber der javascript-code ansich!

Normalerweise, wenn ich einen Syntax-Error angezeigt bekomme, heißt das auch, dass überhaupt keine JS-Funktionen mehr funktionieren, d.h. wenn ich da auf einen Button clicke, passiert einfach nichts, bis ich den Fehler behoben habe.

Hier clicke ich auf die Box und der Text erscheint; Also wird der eigentliche Script-Code davon wohl unberührt sein.

Dass dem Browser die JS-Syntax des Textes aus der Textdatei nicht gefällt, ist ja auch eigentlich egal, solange der eigentliche Code funktioniert.

Gibt es nicht eine Möglichkeit, dem Browser klarzumachen, dass diese Textdatei kein JS-Code ist?

Alles sehr merkwürdig...

Gruß,

Roadster.

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Gibt es nicht eine Möglichkeit, dem Browser klarzumachen, dass diese Textdatei kein JS-Code ist?

Davon geht der Browser sowieso aus. Wenn du den Browser nicht ausdrücklich dazu veranlasst den Text als JavaScript zu interpretieren, z.B. mit eval(), dann wird der Browser auch nicht auf eigene Faust irgendetwas unternehmen.

Alles sehr merkwürdig...

In der Tat.

[Roadster]

Also ich habe das ganze jetzt noch einmal auf einem anderen PC ausprobiert: Genau das Gleiche.

Jedes mal wird die "Syntax" der eingebauten .txt-Datei beanstandet. Verrückt!

Ich meine der Code ist ja jetzt nicht so komplex, dass da irgendwelche Unterschiede nicht auffallen würden.

Tatsache ist aber, dass dieser "angebliche" Syntax-Fehler keinerlei Einfluss darauf hat, wie die
Webseite funktioniert:

Habe noch eine zweite <div>-Box dazugetan und mit einer "click"-Funktion versehen, die ich nach der ersten, welche in der Web-Konsole die Fehlermeldung produziert, ausgeführt habe - und die einwandfrei funktioniert hat.

Die Fehlermeldung in der Firefox-Web-Konsole hat also abgesehen davon, dass es lästig ausschaut, keine Folgen für das Funktionieren des scriptes bzw. der Website als Ganzes.

Ist so ein bischen wie die CSS-Fehlermeldungen in der Web-Konsole, die beim Besuch verschiedener Websites immer mal wieder eintrudeln, die aber letztlich keine Bedeutung haben.

Hätte ich die Konsole nicht geöffnet, wäre mir gar nicht aufgefallen, dass der Browser hier ein Problem sieht, da ja ansonsten alles wunderbar funktioniert.

Trotzdem seltsam, wie es sein kann, dass ein und der selbe Code auf meinen Rechnern mit meinen Firefox-Browsern diese Meldung produziert und auf anderen Rechnern mit anderen Firefox-Browsern nicht...

(ein ratloser)
Roadster.

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Trotzdem seltsam, wie es sein kann, dass ein und der selbe Code auf meinen Rechnern mit meinen Firefox-Browsern diese Meldung produziert und auf anderen Rechnern mit anderen Firefox-Browsern nicht...

Ja, in der Tat. Vor diesem Problem muss ich auch kapitulieren, per Ferndiagnose lässt sich da wenig machen, ich wüsste auch nicht was ich dich dazu noch fragen könnte.

[Roadster]

Habe jetzt nochmal alles rausgeschmissen und in der script-Datei wirklich NUR noch folgenden
Code stehen, den du mir gepostet hast, und absolut NICHTS anderes:

  
var request = new XMLHttpRequest();  
  
request.open("get","beispieltext.txt");  
  
request.send();  
  
request.addEventListener("load", function( e ) {  
  
var text = e.target.responseText;  
  
});

Das ist der gesamte Inhalt der js-Datei.

Er zeigt mir in der Web-Konsole des (dreimal neuinstallierten) FirefoxBrowsers nach wie vor

"x Syntax-Fehler                                                              beispieltext.txt:1"

und wenn ich rechts auf "beispieltext.txt:1" clicke, öffnet er ein Fenster mit dem Inhalt der so benannten Textdatei.

Ich verstehe es nicht.

:-/

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Mach mal bitte einen Screenshot von der Fehlermeldung.

[Roadster]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Mach mal bitte einen Screenshot von der Fehlermeldung.

Und wie soll ich dir den zukommen lassen? (e-mail?)

Gruß,

Roadster

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Und wie soll ich dir den zukommen lassen? (e-mail?)

Du kannst hier im Forum Bilder einbinden. Hochladen kannst du das Bild, bzw. den relevanten Bildausschnitt bei einem 1-Klick-Freehoster deiner Wahl, z.B: http://en.directupload.net/

Bist du eigentlich mal den Hinweisen von JürgenB und Auge bzgl der „Byte Order Mask“ nachgegangen?

[Roadster]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Und wie soll ich dir den zukommen lassen? (e-mail?)

Du kannst hier im Forum Bilder einbinden. Hochladen kannst du das Bild, bzw. den relevanten Bildausschnitt bei einem 1-Klick-Freehoster deiner Wahl, z.B: http://en.directupload.net/

Bist du eigentlich mal den Hinweisen von JürgenB und Auge bzgl der „Byte Order Mask“ nachgegangen?

Ok :-)

also, ich muss jetzt erst nochmal kurz weg und wenn ich wieder da bin checke ich erstmal das mit der BOM, und wenn das auch keinen Effekt hat, dann poste ich screenshots.

Sorry dass ich eure Aufmerksamkeit so über Gebühr beanspruche!

Bis dann,

Gruß,

Roadster.

[Roadster]

So, bin wieder am Start...

Ich habe mir den empfohlenen Editor heruntergeladen und damit die .html .css .js Dateien meiner kleinen Testseite auf "UTF-8 ohne BOM" konvertiert, ohne dass sich dadurch irgendetwas geändert hätte.

Daher nun nocheinmal der Code

html:

<!DOCTYPE HTML>  
<html lang="de-formal">  
 <head>  
  <title>testsite</title>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta http-equiv="expires" content="0">  
   <meta name="viewport" content="width=device-width,  
               initial-scale=1.0, user-scalable=yes">  
   <meta name="author" content="Roadster">  
   <meta name="description" content="testsite">  
  <link rel="stylesheet"  
        href="testcss.css">  
 </head>  
 <body>  
  <div id="testbox">  
  </div>  
  <script type="text/javascript"  
          src="testjs.js">  
  </script>  
 </body>  
</html>

css:

html  
{background: linear-gradient(90deg, #3C5064, #7092BE);  
 font-family: Helvetica, Arial, sans-serif;}  
  
#testbox  
{display: block;  
 position: relative;  
 width: 700px;  
 height: 330px;  
 border: 2px solid black;  
 border-radius: 5px;  
 margin-top: 100px;  
 margin-left: auto;  
 margin-right: auto;  
 margin-bottom: auto;  
 padding: 20px;  
 background: linear-gradient(#C0C0C0 0%, #828282 100%);}

script:

var request = new XMLHttpRequest();  
  
request.open("get","beispieltext.txt");  
  
request.send();  
  
request.addEventListener("load", function( e ) {  
  
var text = e.target.responseText;  
  
});

...und ein Bildchen von dem Ergebnis in der Web-Konsole meines Firefox-Browsers:

http://www.directupload.net/file/d/3790/bv6zpisx_jpg.htm

Das Textfenster öffnet sich, wenn ich am Ende der "Syntax-Fehler"-Zeile auf "beispieltext.txt:1" clicke und stellt den Inhalt der eingebundenen .txt-Datei dar.

Ist halt nicht sonderlich informativ, aber ich wüsste auch nicht, wie man genauere Informationen zu dem Fehler bekommen könnte.

Gruß,

Roadster

[Auge]

Hallo

Ich habe mir den empfohlenen Editor heruntergeladen und damit die .html .css .js Dateien meiner kleinen Testseite auf "UTF-8 ohne BOM" konvertiert, ohne dass sich dadurch irgendetwas geändert hätte.

Hast du die Textdatei ebenfalls durch die Konvertrierung gejagt?

Daher nun nocheinmal der Code

Da der, wie von mehreren Seiten berichtet wurde, auf anderen Rechnern fehlerfrei läuft, …

...und ein Bildchen von dem Ergebnis in der Web-Konsole meines Firefox-Browsers:
…
Ist halt nicht sonderlich informativ, …

Nicht wirklich …

Tschö, Auge

[Roadster]

Hallo Auge!

Hast du die Textdatei ebenfalls durch die Konvertrierung gejagt?

Ja, habe ich, aber das hatte auch keinerlei Effekt.

Das einzige, was einen Unterschied macht, ist ob überhaupt Text in der Textdatei drin ist.

Ist die Textdatei leer, wird folgendes angezeigt:

http://www.directupload.net/file/d/3791/qai2v7y6_jpg.htm

Ich meine, die Sache ist ja irgendwie klar (zumindest scheint es mir so):

Mein Browser geht automatisch davon aus, dass die Textdatei auszuführender js-Code sei.

Die Frage ist also, welche Gründe es dafür geben könnte, dass er das annimmt, wenn es doch wie 1UnitedPower schrieb, eigentlich so ist, dass der Browser automatisch davon ausgeht, dass die Textdatei KEIN Code ist, und im Gegenteil erst dazu angewiesen werden müsste, den Text als Code anzusehen.

Am Browser selbst kann es kaum liegen, denn den habe ich ja frisch neuinstalliert und vorher wirklich alles gelöscht (auch die Dateien, die ich besser nicht hätte löschen sollen).

Zudem habe ich den gleichen Effekt auf zwei verschiedenen Rechnern, der eine Windows 7, der andere Windows 8.1, mit verschiedenen Firefox-Versionen.

Welche Gemeinsamkeiten könnte es zwischen den beiden Rechnern geben, die auf eure Rechner nicht zutreffen?

Welche Programme könnte ich auf beiden Rechnern installiert haben, die DARAUF Einfluss nehmen?

Echt schräg!

Naja, da ich den Win7-Rechner ohnehin neu aufspielen muss und ich mir außerdem nächste Woche einen ganz neuen Rechner zulegen werde, wird sich ja die Gelegenheit bieten, das ganze Experiment noch einmal auf zwei jungfräulichen Systemen durchzuführen und gegebenenfalls nach JEDER Programm-/Plug-in-Installation zu wiederholen, bis der Übeltäter überführt ist.

Ich nehme an, ich kann mir den Aufwand aber nicht dadurch ersparen, dass es neben der Anweisung an den Browser, eine Textdatei als js-Code anzusehen, auch einen script-Befehl gibt, der den Browser explizit dazu anweist, im Gegenteil, dies genau nicht zu tun...?

Gruß,

Roadster.

[Auge]

Hallo

Mach mal bitte einen Screenshot von der Fehlermeldung.

Und wie soll ich dir den zukommen lassen? (e-mail?)

Irgendwo hochladen und hier verlinken bzw. einbinden.

Du kannst alternativ oder besser zusätzlich auch eine Textdatei hier verlinken, bei der der Fehler bei dir auftritt.

Tschö, Auge

[JürgenB]

Hallo Roadster,

ich vermute ein Problem bei der Dateikodierung. Du solltest alle Dateien als UTF-8 ohne BOM kodieren.

Gruß, Jürgen

[Roadster]

Hallo Jürgen,

ich vermute ein Problem bei der Dateikodierung. Du solltest alle Dateien als UTF-8 ohne BOM kodieren.

Was BOM ist, weiß ich nicht, aber sowohl meine html als auch meine css und js Dateien editiere ich im Windows-Editor und das stelle ich jedesmal bevor ich eine neue Datei anlege die Kodierung auf UTF-8, da sonst die Umlaute auf der Seite nicht korrekt dargestellt werden.

Habe gestern Nacht noch bei dem Versuch, meinen Firefox-Browser neuzuinstallieren, selbigen komplett zerschossen, so dass er jetzt auch nach der dritten Neuinstallation nur noch im abgesicherten Modus funktioniert...

Habe nach der ersten Neuinstallation bemerkt, dass Firefox alle Einstellungen, Plug-Ins und was auch immer bei dem alten Browser installiert war, direkt wieder übernommen hat, was dem Sinn einer Neuinstallation irgendwie zuwiderläuft, und versucht, alle Mozilla/Firefox Dateien zu löschen.

Dabei muss ich wohl irgendeine wichtige Systemdatei gelöscht haben, denn seitdem läuft der Firefox im normalen Modus nur noch extrem ruckelig, die Eingaben in allen Textfeldern erscheinen nurnoch zeitverzögert und auch auf Mauseingaben reagiert der Browser nur noch mit einem extremen Lag.

Habe den Code von der Testseite den ich hier gepostet hatte dann auch nochmal auf dem Internet Explorer getestet, und da hat er nicht nur eine Fehlermeldung ausgespuckt, sondern der IE reagierte auf das Script überhaupt nicht.

Jetzt kann ich wohl Windows und den ganzen anderen Mist komplett neu aufspielen und mit meiner Seite bin ich keinen Schritt weiter. Frust pur! :-/

Trotzdem Danke an alle, die mir versucht haben weiterzuhelfen,

Gruß,

Roadster.

[Auge]

Hallo

ich vermute ein Problem bei der Dateikodierung. Du solltest alle Dateien als UTF-8 ohne BOM kodieren.

Was BOM ist, weiß ich nicht, aber sowohl meine html als auch meine css und js Dateien editiere ich im Windows-Editor und das stelle ich jedesmal bevor ich eine neue Datei anlege die Kodierung auf UTF-8, da sonst die Umlaute auf der Seite nicht korrekt dargestellt werden.

womit du eine BOM in den UTF-8-kodierten Dateien hast. Der Windows-Editor kann's nicht anders. Wenn du mit deinen Installationen durch bist, installiere dir den Notepad++ als Editor hinzu. Öffne dort deine Dateien und ändere die Kodierung über „Kodierung→Konvertiere zu UTF-8 ohne BOM“.

Zudem wirst du mit großer Wahrscheinlichkeit feststellen, dass dies ein guter, vielseitiger Editor ist und den Windows-Editor fürderhin nur noch mit spitzen Fingern anfassen wollen. :-)

Tschö, Auge

[Matthias Apsel]

Om nah hoo pez nyeetz, 1UnitedPower!

Hab den Code bei mir getestet und kann den Syntax-Fehler nicht nachvollziehen.

Ich stimme zu. Getestet mit verschiedenen Codierungen der beispieltext.txt. Fehlerfrei. FF und XP.

Irgendwas machst du noch anders.

Schreib doch mal bitte in die Text-Datei ein einfaches Hallo.

Matthias

[hotti]

hi,

Mit JavaScript einen Text vom Server zu laden ist jedenfalls keine große Aufgabe:

Ach was.

[..] new XMLHttpRequest()

Das braucht einen Server, weil HTTP der Transport ist. Mit require.js und dem Text-Plugin kannst Du die Datei auch aus einem lokalem Verzeichnis laden. Was ansonsten nur mit der FileAPI möglich ist (input type file oder drag&drop).

Alles klar? Ne, Du verstehst meine Nachrichten nicht! Und nicht das Anliegen des OP, der eine Lösung ohne Server suchte.

MfG

[Roadster]

Hallo hotti!

[..] new XMLHttpRequest()

Das braucht einen Server, weil HTTP der Transport ist. Mit require.js und dem Text-Plugin kannst Du die Datei auch aus einem lokalem Verzeichnis laden. Was ansonsten nur mit der FileAPI möglich ist (input type file oder drag&drop).

Alles klar? Ne, Du verstehst meine Nachrichten nicht! Und nicht das Anliegen des OP, der eine Lösung ohne Server suchte.

Also funktionieren tut es schon irgendwie (auch ohne server):

Habe die .txt-Datei im gleichen Verzeichnis wie die .html-Datei und mit seinem Code ist es gelungen, den Text aus der .txt-Datei ins script zu laden und von da aus in der <div>-Box richtig darzustellen.

Nur leider meint mein Browser, den Inhalt der Textdatei irgendwie als Code ausführen zu müssen und zeigt mir da natürlich einen Syntax-Fehler an.

Aber das wird wohl nichts damit zu tun haben, dass die .txt-Datei von meiner Festplatte und nicht von einem Server kam (glaube ich).

Gruß,

Roadster.

[hotti]

hi,

Habe die .txt-Datei im gleichen Verzeichnis wie die .html-Datei und mit seinem Code ist es gelungen, den Text aus der .txt-Datei ins script zu laden und von da aus in der <div>-Box richtig darzustellen.

Nur leider meint mein Browser, den Inhalt der Textdatei irgendwie als Code ausführen zu müssen und zeigt mir da natürlich einen Syntax-Fehler an.

Genau deswegen nimm require.js und text.js die hahm das schon so programmiert, dass der text nicht als code interpretiert wird sondern als text im JS ankommt und mit ein klein bischen Zutun Deinerseits auch im Browser :)

Horst Gamsbart

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Mit JavaScript einen Text vom Server zu laden ist jedenfalls keine große Aufgabe:

Ach was.

[..] new XMLHttpRequest()

Das braucht einen Server, weil HTTP der Transport ist.

Nein. Der Name ist XMLHttpRequest ist zwar ausreichend irreführend, aber weder HTTP noch XML sind für AJAX-Requests obligatorisch. Wichtig ist nur, dass das aufrufende Skript und die angeforderte Ressource nicht gegen die Same Origin Policy verstoßen. Wenn beide Dateien lokal sind, kann man auch bequem über den file://-Protokoll-Wrapper Anfragen stellen, die auch beantwortet werden.

Mit require.js und dem Text-Plugin kannst Du die Datei auch aus einem lokalem Verzeichnis laden. Was ansonsten nur mit der FileAPI möglich ist (input type file oder drag&drop).

Und require.js ist auch nur eine UserLand-API, die den gewöhnlichen Browser-Beschränkungen unterliegt. Was meinst du, wie require.js an die Datei-Inhalte kommt, wenn nicht über AJAX?

Alles klar? Ne, Du verstehst meine Nachrichten nicht! Und nicht das Anliegen des OP, der eine Lösung ohne Server suchte.

Wann hast du dir eigentlich diesen verbitterten Tonfall zugelegt?

[JürgenB]

Hallo hotti,

Ach was.

[..] new XMLHttpRequest()

Das braucht einen Server, weil HTTP der Transport ist. ...

liest du überhaupt die anderen Antworten? Und wenn du Einwände hast, warum fragst du nicht gezielt nach?

Alles klar? Ne, Du verstehst meine Nachrichten nicht! Und nicht das Anliegen des OP, der eine Lösung ohne Server suchte.

<Ratloses Kopfschütteln>

Gruß, Jürgen

[JürgenB]

Hallo 1UnitedPower,

request.addEventListener("load", function ( e ) {
   var text = e.target.responseText;
});

  
das der HTTP-Request auch einen onload feuert, wusste ich noch nicht. Dadurch wird das Handling ja recht einfach, da man sich das "Gehampel" mit readyState und status schenken kann.  
  
Gruß, Jürgen  

[Roadster]

Hey nochmal...

Also ich habe mir das mit AJAX mal angeschaut und muss sagen, die Materie ist doch
extrem komplex - ich versteh nur Bahnhof! Schätze, dass würde mich zwei Wochen
kosten, bis ich kapiert habe, wie das läuft.

Ist das denn echt so ein Riesending, Text aus einer externen .txt - Datei zu laden
und dann mit css oder js die Schriftart und -größe zu bestimmen???

Es ist womöglich zuviel verlangt, aber vielleicht könnte mir jemand einmal eine
entsprechende Blaupause vorlegen, wie so eine Eingliederung im script aussehen
würde...

Es geht im Prinzip ja ausschließlich darum, (den ganzen) Text aus einer externen
.txt-Datei, nennen wir sie text.txt, in eine vorhandene div-Box zu integrieren
und dann Schriftart und -größe festzulegen;
Keine Interaktion mit dem Seitenbenutzer oder wofür auch immer AJAX sonst noch
gedacht ist, sondern einfach nur das Anzeigen des Textes aus dem Dokument.

Wer hätte gedacht, dass so eine simple Sache so schwer ist?!

Gruß,

(ein frustrierter)
Roadster.

[Mitleser]

Ich habe mal eine Frage zum Einbinden von Text aus einer externen Textdatei.
Mein Ziel ist es, dass ich die Texte auf meiner Website ohne in den Quellcode
eingreifen zu müssen, über den Windows-Editor bearbeiten kann, dass sie also
als externe .txt - Dateien im Verzeichnis verfügbar sind.

Ich hab mir den ganzen Kram jetzt durchgelesen und möchte Dir jetzt einfach mal eine Lösung vor den Latz knallen:

<!DOCTYPE HTML>  
<!DOCTYPE HTML>  
<html>  
<head>  
<title>GetText</title>  
<style type="text/css">  
#injectText {  
        font-family:sans-serif;  
        white-space:pre;  
        margin:5em;  
}  
</style>  
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>  
<script type="text/javascript">  
$(function () {  
        $("#injectText").load("text-liegt-im-selben-ordnder-wie-die-html-datei.txt");  
});  
</script>  
</head>  
<body>  
<div id="injectText">  
        Wird durch den Inhalt der Textdatei ersetzt!  
</div>  
</body>  
</html>  

Ja, das widerspricht dem durchaus richtigen Self-Gedanken!
Ja, das setzt jQuery voraus und abstrahiert sämtliches Verständnis weg!

Aber es funktioniert und beantwortet die Frage. Bei der Ausgangssituation des OP hier das volle Programm abzuspulen erscheint mir nicht zielführend. Auch nicht für das Archiv, bei dem Müll der hier rausgekommen ist.

[Mitleser]

...ja, der doppelte Doctype ist falsch.

[1UnitedPower]

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Aber es funktioniert und beantwortet die Frage. Bei der Ausgangssituation des OP hier das volle Programm abzuspulen erscheint mir nicht zielführend. Auch nicht für das Archiv, bei dem Müll der hier rausgekommen ist.

„Das volle Programm“ besteht in diesem Fall aus sechs Zeilen JavaScript plus erläutende Kommentare und anschließende Diskussion. Das erscheint mir zielführend und mit Blick auf das Archiv auch als erstrebenswert.

Nicht hilfreich erscheint mir eine unkommentierte Lösung, die eine zusätzliche Bibliothek erfordert und den zusätzlichen Nachteil mit sich bringt, dass das jQuery-CDN verfügbar sein muss und damit auch eine Internet-Verbindung.

Was ist deiner Meinung nach an der Vanilla-JS Lösung Müll?

[Mitleser]

„Das volle Programm“ besteht in diesem Fall aus sechs Zeilen JavaScript plus erläutende Kommentare und anschließende Diskussion. Das erscheint mir zielführend und mit Blick auf das Archiv auch als erstrebenswert.

Wäre die zeitiger und kompakter gekommen: vielleicht. Allerdings ist das Problem dann doch (für Anfänger) hinreichend kompliziert. Wird ein Anfänger(ein von Google kommender Newbie) da durchsteigen? Hat der OP skizziert welche Browser er erreichen möchte? Aus den sechs Zeilen können schnell mehr werden: es wird noch komplizierter.

Nicht hilfreich erscheint mir eine unkommentierte Lösung, die eine zusätzliche Bibliothek erfordert und den zusätzlichen Nachteil mit sich bringt, dass das jQuery-CDN verfügbar sein muss und damit auch eine Internet-Verbindung.

Stimmt. Jetzt wägen wir mal die Gefahr des nicht verfügbaren CDN mit der Transferleistung der zur Vermeidung nötigen dezentralen jQuery-Einbindung ab. Da kann man geteilter Meinung sein. ACK.

Was ist deiner Meinung nach an der Vanilla-JS Lösung Müll?

Überhaupt nichts. Zunächst: Repsekt vor Deiner Mühe. Der Sarkasmus in meinem Post ging auch keinesfalls gegen Dich persönlich, im Gegenteil. Aber durch die Zersplitterung über die vielen Posts ging mir Deine - eigentlich richtige - Intention völlig verloren. Daher erschien mir der "Hammer" mit dem dreizeiligen jQuery-Snippet angebracht.

Wird ein Newbie durch das Lesen des bisherigen Threads sonst schlauer? Wage ich zu bezweifeln.

Ja, die Vanilla-JS-Lösung ist "reiner". Ob Sie einen Newcomer aber wirklich hilft? Ich bin da skeptisch. Sie bleibt für den Kenner "reiner", aber beide Varianten werden für den den Google-Newbie ein großes "?" übrig lassen. Das ist keine Frage Bibliothek vs. Vanilla.

[Jörg Reinholz]

<div>
<object id="text1" data="content/text/text1.txt" type="text/plain"></object>
</div>

Ja. Das erzeugt ein Objekt. Viel Spaß beim offline-Lesem bzw. mit Suchmaschinen...

Besser 1:

Wenn Du PHP benutzen kannst:

<div id="text1">  
    <?php [link:http://de2.php.net/manual/de/function.file-get-contents.php@title=file_get_content]s('content/text/text1.txt'); ?>  
</div>

Freilich sollten Deine Seiten dann auch die Endung ".php" haben. Bei Lesen im Handbuch werden Dir viele Ideen kommen.

Besser 2:

Falls Dein Server kein PHP aber SSI unterstützt:

<div id="text1">  
    <!--#include file="header.shtml" -->  
</div>

Freilich sollten Deine Seiten dann auch die Endung ".shtml" haben.

Javascript ist nach dem Objekt die (zweit-)schlechteste aller Lösungen. Es gäbe noch Lösungen in Perl, Python und etlichen anderen Programmier- bzw. Skriptsprachen.

Jörg Reinholz

[JürgenB]

Hallo Jörg,

Zitat aus https://forum.selfhtml.org/?t=218677&m=1506531:

"aber die Seite an der ich sitze, wird auf unbestimmte Zeit ohnehin nur
offline verwendet"

Gruß, Jürgen

[Jörg Reinholz]

"aber die Seite an der ich sitze, wird auf unbestimmte Zeit ohnehin nur
offline verwendet"

Dann kann er sich z.B. immer noch pures PHP installieren und die Seite nach jeder Textänderungen neu bauen lassen.

aus einer Datei test.php:

  
<html>  
<h1><?php print trim(file_get_contents('test1.txt')); ?></h1>  
</html>  

und einer Datei test1.txt:

  
Foo! Bar!  

wird mit einem:

  
~> php test.php > test.html  

eine HTML-Datei:

  
<html>  
<h1>Foo! Bar!</h1>  
</html>  

jetzt noch eine hübsches Skript:

  
#!/bin/sh  
## file: php_executer.sh  
if test "" = "$1"; then  
   echo "Fehler: Kein Argument.\n";  
   exit;  
fi  
php $1 > `echo $1 | sed 's/\.php$/.html/i'`;  

und eine Suche:

  
~> find -name "*.php" -exec ./php_executer.sh {} \;  

wird alle php-Dateien exekutieren und die dazu gehörende HTML-Datei erzeugen.

Die Suche mit dem Exec kann man auch in ein Skript schreiben:

  
#!/bin/sh  
## file exec_all_php.sh  
cd /foo/bar/tolles_verzeichnis  
find -name "*.php" -exec ./php_executer.sh {} \;  

Sicherlich kann man das auch unter Windows machen. Ferner sollten für den produktiven Einsatz, insbesondere bei Dritten, noch die Fehler abgefangen werden.

Jörg Reinholz

[JürgenB]

Hallo Jörg,

"aber die Seite an der ich sitze, wird auf unbestimmte Zeit ohnehin nur
offline verwendet"

Dann kann er sich z.B. immer noch pures PHP installieren und die Seite nach jeder Textänderungen neu bauen lassen.

na ja, wer PHP installiert um Javascript auf seiner eigenen Offlineseite zu vermeiden, muss schon eine extreme Abneigung gegen Javascript haben.

Gruß, Jürgen

[Jörg Reinholz]

Moin

na ja, wer PHP installiert um Javascript auf seiner eigenen Offlineseite zu vermeiden, muss schon eine extreme Abneigung gegen Javascript haben.

Vor allem habe ich das hier gelesen.

Jörg Reinholz

[Roadster]

Hallo miteinander.

Ich weiß nicht, ob hier noch jemand mitliest, ansonsten für's Archiv und den Fall, dass jemand das gleiche Problem mit der Implementierung von Text aus externen Textdokumenten über JavaScript hat, wie ich es hier ausführlich beschrieben habe.

Obwohl die hier vorgeschlagene Lösung scheinbar bei allen funktionierte, wurde mir beim selben Code in Firefox immer ein Syntax-Fehler angezeigt, da der Browser aufgrund irgendeines Plug-Ins oder irgendeiner installierten Software (vielleicht die Anti-Viren Software?) davon ausging, dass der Text in der .txt - Datei auszuführender JS-Code sei.

An dieser Tatsache hat sich auch nichts geändert, aber ich habe eine Alternative gefunden, welche keine Fehler produziert und welche die von mir im Eingangspost formulierten Bedürfnisse zu 98% befriedigt:

Da der Text, der aus dem HTML-Code ausgelagert und bei Bedarf implementiert werden soll, ohnehin über CSS formatiert werden soll, spielt die Herkunft des Textes nur eine untergeordnete Rolle, was bedeutet: eigentlich ist das Dateiformat der Quelldatei für den Text unwichtig, - abgesehen vielleicht von dem Kriterium, dass es sich um ein Format handeln sollte, dass mit simplen und üblichen Texteditoren aufgerufen, zumindest grob bearbeitet und hernach wieder gespeichert werden können sollte.

Habe daher nun den selben Code auf eine externe HTML-Datei angewendet, statt auf eine TXT-Datei, und die ganze Sache funktioniert perfekt, ohne, dass irgendwelche Fehler auftauchen!

document.getElementById("ziel-div").addEventListener("click", showtext);  
function showtext() {  
var request = new XMLHttpRequest();  
request.open("get", "test.html");  
request.send();  
request.addEventListener("load", function( e ) {  
var text = e.target.responseText;  
document.getElementById("ziel-div").innerHTML = text;  
});}

und in der "Text-Datei"

<html><head><title>test</title></head><body><p>  
  
  
  
Test.Text.  
Test.Text.  
Test.Text.  
Test.Text.  
Test.Text.  
Test.Text.  
Test.Text.  
  
  
  
  
</p></body></html>  

Bedeutet halt, dass man am oberen und unteren Rand der Datei mit dem Text je eine Zeile HTML-Code stehen hat, aber diesen Umstand empfinde ich nicht als sonderlich störend.

Ich weiß, nicht der große Durchbruch, aber eine Lösung, mit der ich problemlos leben kann.

Also, Danke nochmal an alle Beteiligten!

Gruß,

Roadster.

[JürgenB]

Hallo Roadster,

deine Lösung ist falsch, da html, head und body in einem div nichts zu suchen haben.

Gruß, Jürgen

[Roadster]

Hallo Roadster,

Hallo Jürgen.

deine Lösung ist falsch, da html, head und body in einem div nichts zu suchen haben.

Magst du das etwas genauer ausführen? Die HTML-Tags sind doch gar nicht "in" dem div!?

Der modifizierte Code

document.getElementById("ziel-div").addEventListener("click", showtext);  
function showtext() {  
var request = new XMLHttpRequest();  
request.open("get", "test.html");  
request.send();  
request.addEventListener("load", function( e ) {  
var text = e.target.responseText;  
document.getElementById("ziel-div").innerHTML = text;  
});}  

läd doch nur die externe HTML-Datei mit dem Text INS Script (und erstmal NUR dahin) und holt sich dann AUS der HTML-Datei den Text, also alles, was mit <p> ... </p> als Text definiert ist, und zeigt diesen (und NUR diesen!) dann via innerHTML in der Box an.

Ich lade ja nicht wie bei iframe die ganze HTML-Datei in die div-Box, sondern hole mir nur den mittels <p></p> ausgezeichneten Text(!) aus der externen Datei, welcher dann auf der Webseite angezeigt wird!

Vielleicht reicht mein Verständnis des Vorgangs nicht aus, um das adäquat beurteilen zu können, aber ich sehe nicht, wie die HTML-Tags aus der externen Datei in die div-Box gelangen sollen?

Wenn ich es so mache wie beschrieben, wird der Text aus der externen Datei korrekt angezeigt, und Fehlermeldungen seitens des Browsers gibt es auch keine...

Gruß,

Roadster.

[Der Martin]

Hi,

deine Lösung ist falsch, da html, head und body in einem div nichts zu suchen haben.
Magst du das etwas genauer ausführen? Die HTML-Tags sind doch gar nicht "in" dem div!?

anfangs nicht, aber dann schreibst du sie hinein. Und dann ist es fehlerhaftes HTML.

document.getElementById("ziel-div").addEventListener("click", showtext);

function showtext() {
var request = new XMLHttpRequest();
request.open("get", "test.html");
request.send();
request.addEventListener("load", function( e ) {
var text = e.target.responseText;
document.getElementById("ziel-div").innerHTML = text;
});}

>   
> läd doch nur die externe HTML-Datei mit dem Text INS Script (und erstmal NUR dahin) und holt sich dann AUS der HTML-Datei den Text, also alles, was mit <p> ... </p> als Text definiert ist, und zeigt diesen (und NUR diesen!) dann via innerHTML in der Box an.  
  
Wo ist der Teil im Script, der den Text zwischen <p> und </p> herauspopelt?  
  

> Ich lade ja nicht wie bei iframe die ganze HTML-Datei in die div-Box, sondern hole mir nur den mittels <p></p> ausgezeichneten Text(!) aus der externen Datei  
  
Wo? Mit welcher Anweisung?  
  

> Vielleicht reicht mein Verständnis des Vorgangs nicht aus, um das adäquat beurteilen zu können, aber ich sehe nicht, wie die HTML-Tags aus der externen Datei in die div-Box gelangen sollen?  
  
Du holst dir über e.target.responseText den vom Server geladenen Text (der die HTML-Tags einschließt), und schreibst ihn komplett ins Dokument. Lass dir mal den Inhalt von e.target.responseText anzeigen (z.B. mit alert()), und du wirst sehen, dass es der komplette Dateiinhalt ist. Was auch sonst? Da ist nirgends irgendeine geheimnisvolle Logik, die irgendwas interpretiert, auswertet oder auftrennt.  
  
Ciao,  
 Martin  

-- 
F: Was sagt der große Keks zum kleinen Keks?  
A: Du kannst dich jetzt verkrümeln.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Roadster]

Hallo Martin!

Du holst dir über e.target.responseText den vom Server geladenen Text (der die HTML-Tags einschließt), und schreibst ihn komplett ins Dokument. Lass dir mal den Inhalt von e.target.responseText anzeigen (z.B. mit alert()), und du wirst sehen, dass es der komplette Dateiinhalt ist. Was auch sonst? Da ist nirgends irgendeine geheimnisvolle Logik, die irgendwas interpretiert, auswertet oder auftrennt.

Ok. Jetzt hab ich's! Bin irgendwie automatisch davon ausgegangen, dass "responseText" aufgrund einer geheimnisvollen Logik die Ursprungsdatei interpretiert, auswertet, auftrennt und mir dann den Text rauspopelt. :-)

Gut, wenn responseText also grundsätzlich und pauschal allen Text aus der Datei holt, stellt sich natürlich die Frage, ob ich dann nicht so einen "Filter" anderweitig in die Funktion einbauen kann?

Also irgendeinen Befehl, der die ersten X Zeichen aus der externenen Datei und die letzten X Zeichen (die eben den HTML-Code darstellen) ignoriert, - oder positiv ausgedrückt, eben nur die Zeichen X bis Y (für den Text) aus der Datei läd?

Ginge das und wäre sowas praktikabel?

Gruß,

Roadster.

[Roadster]

Heja.

Also, habe den Code, der bei keinem von euch zu der hier ausführlich dokumentierten Fehlermeldung geführt hat, noch einmal auf einem komplett neuen System ausprobiert, auf dem außer Windows und Firefox praktisch nichts installiert ist, und der Effekt ist der gleiche!

Habe das jetzt auf einem halben Duzend unterschiedlichster Rechner ausprobiert und JEDES MAL wird mir in der Webkonsole des Firefox-Browsers angezeigt, dass ein Syntax-Fehler vorliegt, wobei als Quelle des Fehlers rechts in der selben Zeile die jeweilige .txt-Datei angegeben ist, die ich mit JavaScript (erfolgreich) in die Seite eingebaut habe.

Also alles beim alten: Firefox denkt, die eingebaute Textdatei sei auszuführender Code und meldet daraufhin logischerweise Syntax-Fehler, da der Inhalt der Datei nunmal kein Code ist, sondern nur Text.

Eigentlich ist die Fehlermeldung zwar unbeachtlich, da ja nicht der Code, sondern nur der Text beanstandet wird und dementsprechend die Funktion ganz normal und richtig ausgeführt wird und auch das ganze Programm ganz normal läuft (und auch nicht von Firefox beanstandet wird), aber etwas nervig ist es dann doch, wenn die Webkonsole mit diesen unsinnigen Fehlermeldungen geflutet wird!

Was bleibt, ist die Frage, warum das bei mir so ist und bei keinem sonst!

Neuer Rechner; Windows neu drauf; Firefox neu drauf; Alles Standard-Einstellungen; Der hier gepostete Code für die HTML-, CSS- und JS-Datei exakt 1:1 - kein Zeichen mehr oder weniger - und mit Notepad++ w/o BOM kodiert ...und ich bekomme diese Fehler-Meldung!

Es ist mir ein absolutes Rätsel.

Welche Einstellung in Windows bzw. Firefox könntet ihr alle getroffen haben, die ich nicht habe und die dafür verantwortlich ist? Ein von mir installiertes "drittes" Programm, dass darauf irgendwie einwirkt, kann, denke ich, ausgeschlossen werden, nachdem ich es auf so vielen unterschiedlichen Rechnern versucht habe, inklusive meinem ganz neuen Rechner, auf dem außer Windows und Firefox noch nichts installiert wurde.

Tja, also falls irgendwer eine Idee hat, woran das liegen könnte, oder gar die gleiche Fehler-Meldung angezeigt bekommt, möge er es mich wissen lassen.

Ich bin mit meinem Latein am Ende.

Also,

nochmal Dank an alle und

beste Grüße,

Roadster.

[Matthias Apsel]

Om nah hoo pez nyeetz, Roadster!

Der hier gepostete Code für die HTML-, CSS- und JS-Datei exakt 1:1 - kein Zeichen mehr oder weniger - und mit Notepad++ w/o BOM kodiert ...und ich bekomme diese Fehler-Meldung!

Stell das mal bitte irgendwo online, zum Beispiel bei bplaced.net.

Matthias