[ERLEDIGT] .txt in HTML einbinden

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

Ofi123

Neues Mitglied
3 Dezember 2019
6
0
1
14
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
 

basti1012

Senior HTML'ler
26 November 2017
1.069
113
63
38
Minden
sebastian1012.bplaced.net
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 ?
 

Ofi123

Neues Mitglied
3 Dezember 2019
6
0
1
14
Danke für deine schnelle Antwort!
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 ?
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.
 

basti1012

Senior HTML'ler
26 November 2017
1.069
113
63
38
Minden
sebastian1012.bplaced.net
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>
 

Ofi123

Neues Mitglied
3 Dezember 2019
6
0
1
14
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>
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).
 

m.scatello

Aktives Mitglied
15 Februar 2017
996
119
43
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
 
  • Like
Reactions: Jascha Vossel

basti1012

Senior HTML'ler
26 November 2017
1.069
113
63
38
Minden
sebastian1012.bplaced.net
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 ?
 

Ofi123

Neues Mitglied
3 Dezember 2019
6
0
1
14
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
 

basti1012

Senior HTML'ler
26 November 2017
1.069
113
63
38
Minden
sebastian1012.bplaced.net
Wenn du den Code so posten tust ist das das schon besser.

Ich habe den Code mal kopiert und mal online gestellt
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.
 
Werbung: