• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] .txt in HTML einbinden

O

Ofi123

Neues Mitglied
Hallo!
Ich habe versucht eine .txt-Datei in HTML einzubinden und anschließend zu formatieren.
Ich habe es mit einem <iframe> Tag probiert, doch dort kann ich den Text ja nicht formatieren.

Habt ich Vorschläge wie ich das umsetzen kann?
LG
 
ja mit php.
Obwohl man txt datein eigentlich auch mit Javascript oder auch dein Iframe öffnen kann ( wenn txt datei auf Server liegt ).
Wenn man die mit Php oder Javascript öffnet kann man die auch auseinander nehmen und nur das anzeigen was man davon brauch.

Wie sieht den deine TXT Datei aus und was willst du davon anzeigen ?
 
Danke für deine schnelle Antwort!
basti1012 schrieb:
ja mit php.
Obwohl man txt datein eigentlich auch mit Javascript oder auch dein Iframe öffnen kann ( wenn txt datei auf Server liegt ).
Wenn man die mit Php oder Javascript öffnet kann man die auch auseinander nehmen und nur das anzeigen was man davon brauch.

Wie sieht den deine TXT Datei aus und was willst du davon anzeigen ?
Zum Vergrößern anklicken....
Ich will den Text aus der .txt-Datei laden, damit ich nicht immer den Text direkt in der HTML-Datei ändern muss.
Auf der Homepage (die ich gerade entwerfe) wird nämlich die Schriftart 'Dosis' verwendet und die würde ich auch gerne für den Text aus der .txt-Datei verwenden, der dann geladen wird.

https://drive.google.com/drive/folders/1MqKMQ-QYEafuCwT5Vek3ADzsxt9SJQra?usp=sharing --> Hier habe ich ein Beispiel wo ich das eingebunden haben will und was.
 
Kommt drauf an wie du es gerne hättest.
Du kannst iframe nehmen
oder object
http request ( ajax ).
Oder php mit file(), filer_get_contents() , readfile oder include();

Da gibt es wohl noch mehr möglichkeiten.
versuch es einfach mal mit include oder readfile, wäre jetzt am einfachsten.
PHP: 
    <?php include('test.txt'); ?>
  oder
    <?php readfile('test.txt'); ?>
Ansonsten Javascript
Code: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>.txt in HTML einbinden</title>
<style>
  #inhalt,body{
  color:red;
    font-family: 'Dosis';
}
</style>
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="text-decoration: underline; color: rgb(36, 125, 160);">Überschift</h1>
<p1>Unter mir soll .txt-Datei <a href="Text.txt">Text.txt</a>&nbsp;, mit der Schriftart 'Dosis' eingebunden werden.</p1>
    <div id="inhalt"></div>
    <script>
window.onload = function () {
  div=document.getElementById('inhalt');
  var linksrc = "test.txt";

  let xhr = new XMLHttpRequest ();
  xhr.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      let response = this.responseText;
       div.innerHTML+=response;
      div.style.color='red';
      }
  }
  xhr.open ("GET", linksrc);
  xhr.send ();
}
</script>
  </body>
</html>
 
basti1012 schrieb:
Kommt drauf an wie du es gerne hättest.
Du kannst iframe nehmen
oder object
http request ( ajax ).
Oder php mit file(), filer_get_contents() , readfile oder include();

Da gibt es wohl noch mehr möglichkeiten.
versuch es einfach mal mit include oder readfile, wäre jetzt am einfachsten.
PHP: 
    <?php include('test.txt'); ?>
  oder
    <?php readfile('test.txt'); ?>
Ansonsten Javascript
Code: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>.txt in HTML einbinden</title>
<style>
  #inhalt,body{
  color:red;
    font-family: 'Dosis';
}
</style>
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="text-decoration: underline; color: rgb(36, 125, 160);">Überschift</h1>
<p1>Unter mir soll .txt-Datei <a href="Text.txt">Text.txt</a>&nbsp;, mit der Schriftart 'Dosis' eingebunden werden.</p1>
    <div id="inhalt"></div>
    <script>
window.onload = function () {
  div=document.getElementById('inhalt');
  var linksrc = "test.txt";

  let xhr = new XMLHttpRequest ();
  xhr.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      let response = this.responseText;
       div.innerHTML+=response;
      div.style.color='red';
      }
  }
  xhr.open ("GET", linksrc);
  xhr.send ();
}
</script>
  </body>
</html>
Zum Vergrößern anklicken....
Funktioniert bei mir leider nicht.

Ich habe den "ajax-code" genau so in mein HTML Dokument übernommen (aber test.txt auf den Namen meiner .txt Datei geändert).
 
Was geht den daran nicht ?
Was für Fehler werden den angezeigt ?
Geht der Php Code auch nicht ?

Kannst du das mal Online stellen damit man das mal sehen kann
 
Sorry, aber die ganze Herangehensweise ist doch Käse! Warum nicht mit PHP? Und warum eine Text-Datei?
 
Wenn du das richtigerweise mit PHP machst, muss die Datei auch index.php heißen und der Webserver muss PHP unterstützen. Außerdem bindet man ein Text-Datei mit readfile ein und nicht mit include
 
Warum postest du den Code nicht hier?
Aber ,
Mit Php kann es so nicht gehen weil die index eine html datei ist und keine php.
Das muß man ändern in index.php
bei include steht text.txt und nicht test.txt.
Dann kannst du es auch gleich in readfile ändern.
Wenn @m.scatello das sagt dann man das mit readfile macht dann ist das schon richtig.

Die andere Version mit Javascript hatte ich von dir auch getestet und die geht auch ohne probleme.Hast du Javascript aktiviert ?

Kannst du das auch mal online stellen , und nicht als upload bei Googel ?
 
HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>.txt in HTML einbinden</title>
<style>
  #inhalt,body{
  color:red;
    font-family: 'Dosis';
}
</style>
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="text-decoration: underline; color: rgb(36, 125, 160);">Überschift</h1>
<p1>Unter mir soll .txt-Datei <a href="test.txt">Test.txt</a>&nbsp;, mit der Schriftart 'Dosis' eingebunden werden.</p1>

<div id="inhalt"></div>
    <script>
        window.onload = function () {
        div=document.getElementById('inhalt');
        var linksrc = "test.txt";

        let xhr = new XMLHttpRequest ();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
            let response = this.responseText;
            div.innerHTML+=response;
            div.style.color='red';
            }
        }
        xhr.open ("GET", linksrc);
        xhr.send ();
        }
        </script>
  </body>
</html>

Code: 
Ich wurde mit XMLHttpRequest eingebunden.
Der untere Code ist die .txt Datei mit dem Namen test.txt
 
Wenn du den Code so posten tust ist das das schon besser.

Ich habe den Code mal kopiert und mal online gestellt
*** Link exestiert nicht mehr ***
wie du siehst geht er so .
Zur Demo habe ich darunter auch readfile genutzt
Code: 
        <h2>Hier mit php readfile() </h2>
        <div id="inhalt2"><?php readfile('test.txt'); ?></div>

Ich weiß nicht mehr wie man dir noch helfen kann.
Du mußt den Code mal auf deiner Homepage packen und mal den Link hier posten, ansonsten weiß ich nicht mehr weiter.
Hier wurden jetzt gute und nicht gute Lösungen gezeigt die alle funktionieren , nur bei dir nicht ?

Wie und wo testest du den Code ?
Kannst du den online stellen?
Ansonsten weiß ich nicht mehr weiter.

PS:
Du nutzt in deinen Code <p1> was kein aktuelles html5 Element ist.
Es ist wohl erlaubt das bei html5 zu nutzen doch ich würde darauf verzichten und es ändern in <p class="p1">.
Ist auch nicht gerade schön aber besser.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben