Text aus Text Datei auf Webseite Anzeigen?
Hallo ich habe auf meiner Webseite einen Text der aber eigentlich mit php geladen wird und ich würde gerne es nicht Server seitiges haben das laden und ein iFrame sieht echt nicht gut aus, hat jemand eine Idee für eine Lösung?
2 Antworten
Wenn die HTML-Datei lokal geöffnet werden soll, sich also nicht auf einem Webserver befindet, ist das Auslesen von Dateien im Dateisystem in den meisten Fällen nicht möglich, da der Browser diese Aktion aus Sicherheitsgründen blockiert.
Wenn man beispielsweise mit XAMPP einen lokalen Webserver eingerichtet hat, gibt es drei Methoden, um den Inhalt von Dateien auszulesen:
jQuery AJAX (Asynchronous JavaScript and XML):
$.get("pfad/zur/textdatei.txt", function(data) {
$("#text").text(data);
});
In diesem Beispiel dient die Funktion $.get() dazu, Daten von einem Server mittels eines HTTP-GET-Requests zu laden. Dabei wird im ersten Parameter der Pfad oder die URL zur Datei angegeben. Im zweiten Parameter wird eine Funktion eingesetzt, die ausgeführt wird, sobald der Dateiinhalt geladen wurde. Schließlich wird der Textinhalt, der in der Variable data gespeichert ist, in das HTML-Element #text geladen.
Hierzu muss allerdings noch die jQuery-Bibliothek geladen werden:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Die Datei kannst Du auch herunterladen und lokal auf dem Webserver hinterlegen.
Fetch-API
fetch("pfad/zur/textdatei.txt")
.then(response => {
// Dateiinhalt im Textformat zurückgeben
return response.text();
})
.then(data => {
document.getElementById("text").textContent = data;
});
Alternativ zu den AJAX-Funktionen der jQuery-Bibliothek kann man die sogenannte Fetch-API verwenden, die von allen modernen Webbrowsern unterstützt wird.
Hier wird mithilfe der fetch()-Funktion die angebene Datei geladen. Wenn die Datei geladen wurde, wird die Funktion im ersten then() ausgeführt, in der der Textinhalt der Datei zurückgegeben und damit das nachfolgende then() ausgeführt wird. Der in der Variable data gespeicherte Text wird nun in das HTML-Element #text hingeladen.
Die jQuery-Bibliothek braucht man nicht zu importieren, um die Fetch-API zu verwenden.
Den Code zur Fehlerbehebung habe ich der Einfachheit halber ausnahmsweise ausgelassen.
XMLHttpRequests
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
document.getElementById("text").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "pfad/zur/textdatei.txt", true);
xhr.send();
In manchen älteren Browsern (z. B. Internet Explorer) wird die Fetch-API nicht unterstützt (siehe dazu Fetch | Can I use…). In diesem Falle kann man auf sogenannte XMLHttpRequests zurückgreifen, wenn man die AJAX-Funktionen der jQuery-Bibliothek nicht verwenden möchte.
In diesem Code wird zuerst ein XMLHttpRequest-Objekt erstellt. Sobald sich der Ladestatus ändert, wird onreadystatechange ausgeführt: Die if-Bedingung this.readyState == 4 && this.status == 200 überprüft, ob die Datei erfolgreich geladen wurde, womit der Dateiinhalt unter xhr.responseText in das HTML-Element mit der ID text geladen wird. Bei xhr.open() werden die HTTP-Methode (GET) und der Dateipfad angegeben; der Wert true im 3. Parameter dient der asynchronen Ausführung. xhr.send() sendet die Serveranfrage ab.
Auch hier habe ich den Code zur Fehlerbehebung der Einfachheit halber weggelassen.
an Ajax traue ich mich nicht wirklich heran da ich es irgendwie nicht ganz verstehe und es nicht so ganz bei mir funktioniert, momentan mache ich es mit php was zwar funktioniert aber eben auch Nachteile hat:
<?php
if ($_REQUEST['sent']) {
$file = 'textspeicher/action.txt';
$content2 = unserialize(file_get_contents($file));
echo nl2br("<center>$content2<center>");
}
?>
So ginge es auch. Drei Anmerkungen:
- Um zu überprüfen, ob $_REQUEST['sent'] vorhanden ist, sollte man isset($_REQUEST['sent']) schreiben.
- unserialize() brauchst Du hier nicht.
- Das HTML-center-Tag gilt in HTML5 als veraltet. Die Zentrierung sollte mittels der CSS-Eigenschaft text-align: center; erfolgen.
- was ist da der Unterschied?
- doch ich habe es ohne getestet und es wird benötigt
- ich weiß aber der html Center Tag ist extrem praktisch
zu 1) Die Funktion isset() überprüft, ob eine Variable (in diesem Falle $_REQUEST['sent']) existiert. Wenn also in der URL z. B. ?send steht, wird der Dateiinhalt ausgelesen.
zu 2) Wie sieht der Inhalt der Textdatei aus? Möglicherweise hast Du serialize() verwendet.
zu 3) Zu Übungs- bzw. Testzwecken kannst Du das center-Tag gerne benutzen, ansonsten wird jedoch davon abgeraten.
- danke sehr interessant
- der Speicherungsmechanismus hat serialize() sonnst funktioniert er nicht
- okay dann werde ich das anpassen!
das Hauptproblem ist das das ganze in einem Akkordeon ist und mit einem Button erst ausgeführt wird, so muss man an die Stelle des Akkordeons, den Button drücken und das wieder geschlossen Akkordeon neu öffnen..
serialize() braucht man nicht, um einen einfachen String (Text) in einer Textdatei abzuspeichern. Folgenden PHP-Code würde man dazu schreiben:
$text = "Hallo Welt, hier ist ein Text.";
$file = fopen("textdatei.txt", "w");
fwrite($file, $text);
fclose($file);
Oder auch:
$text = "Hallo Welt, hier ist ein Text.";
file_put_contents("textdatei.txt", $text);
Hmm okay ich habe das immer folgendermaßen gemacht:
<?php
if ($_REQUEST['save']) {
$my_variable = $_POST['textfeld'];
$file = 'action.txt';
$content = serialize($my_variable);
file_put_contents($file, $content);
$content = unserialize(file_get_contents($file));
}
Wie gesagt – serialize() und unserialize() sind überflüssig, da Du nur vorhast, Strings abzuspeichern.
Nach Speichern des Textes mit file_put_contents dieselbe Datei mit file_get_contents noch einmal zu laden, ist ebenfalls überflüssig und ineffektiv, zumal der eingegebene Text bereits in $my_variable vorhanden ist.
So genügt es:
if(isset($_REQUEST['save'])) {
$content = $_POST['textfeld'];
$file = 'textdatei.txt';
file_put_contents($file, $content);
}
Aber ich habe es getestet und nur so hat es funktioniert
Woher soll der Text denn sonst kommen wenn nicht vom Server ?
Es wäre ein direktes ändern der HTML Seite. Irgend ein <p> Element.
ABER das Lesen des Text hat doch mit der Darstellung nichts zu tun.
Wo, wie wird durch CSS und das aufnehmende Element in der HTML Struktur bestimmt.
Ohne PHP kann man auch einfach eine txt.js Datei referenzieren.
Wenn dort eine json Struktur definiert ist kann man per Script dieses einfach auf der Seite anzeigen. ..und wie gesagt ist die Ansicht Sache ein anderes Kapitel.
Ich will es nur nicht mit php da es 1. Ressourcen vom Server verbraucht und 2. die Seite beim aktualisieren neu geladen werden muss, wenn ich Beispiel den Text per iframe einfüge würde man vor und hinter dem Text noch Stücke sehen die man nicht sehen soll und wie ich es besser hin bekomme weiß ich nicht da ich Anfänger bin und mir nichts einfällt..
iframe
wird verwendet wenn man in einer eigenen Webseite eine weitere EXTERNE Webseite einfügen will.
Da du dies nicht willst sollte der IFRAME erst einmal weg und du musst dich damit beschäftigen, wie man Text, der sich immer wieder ändert auf einer Webseite aktualisiert.
Egal, wie du es machst eine Refresh am Front End (Ansicht der Webseite) wird man IMMMER benötigen. Es sei denn du programmierst für die User ein Autorefresh der Webseite.
Anmerkung:
Dies machen NICHT einmal Nachrichten Webseiten.
Da erhält man nur den Hinweis, dass sich die Seite verändert hat. Einen Refresh muss man dann immer noch selbst machen.
Siehe mal hier:
W3Schools Tryit Editor
Sowohl die Fetch-, als auch die XHR-API sind konkrete Implementationen von AJAX.