JS - HTML auslesen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aussehen
beachten
benutzen
code
dokument
element
erzeugen
frage
funktion
http
inhalt
modeln
objekt
problem
stehen
string
suche
text
umwandeln
url
-
Hallo!
Ich verzweifle gerade ein bisschen, da ich einfach nur mittels JS ein HTML Dokument in einer Variable abspeichern und dann verändern wollte. Allerdings suche ich schon seit heute Morgen nach einer Funktion, die mir den gesamten Inhalt des HTML Dokumentes ausgibt. Erst dachte ich an "innerHTML" oder "innerText", dann muss ich aber erfahren, dass diese nicht auf das gesamte Dukemt angewendet werden können, sondern nur auf ein einzelnes Element...
Also frage ich euch, ob es überhaupt die Funktion gibt, die ich suche, oder ob ich wirklich jede Taggruppe durchgehen und mir den Text einzeln herausholen muss. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hi,
etwas ausführlicher:
Mit folgendem Script sollte Dir das gelingen. Zugegeben, die beiden umrahmenden Tags sind nicht dabei, die kannst Du ja dann dazumogeln. Du kannst auch "outerHTML" benutzen, da sind die beiden html-Tags dann mit dabei. outerHTML funktioniert jedoch leider nicht überall (z.B. Firefox geht nicht).
<html id="main"> <script> function test() { var x = document.getElementById("main"); alert(x.innerHTML); } </script> <body> <a href="javascript:test();">Test</a> </body> </html>
Das funktioniert allerdings nur, wenn das Script in die HTML-Seite includiert ist. Andere Seiten als Datei einzulesen, wirst Du wohl nur über ActiveX oder ähnliche Konstruktionen hinbekommen. Hierzu bietet allerdings SELFHTML genügend Beispiele, in die Du dich einlesen kannst.
Alternativ kannst Du das vom Server erledigen lassen, z.B. über PHP bereits beim Erzeugen der HTML-Ausgabe das Script ebenfalls mit erzeugen und den Inhalt der gewünschten Datei in einer Javascript-Variable ablegen. Ein ähnliches Thema habe ich meines Wissens allerdings erst vor Kurzem hier in einem Thread gesehen. Vielleicht mal die Suchfunktion benutzen.
LG
BigBaer -
bladehunter schrieb:
Oha. Doch so einfach.
Das sollte eigentlich überhaupt kein Problem sein:
inhalt = document.getElementsByTagName( 'html' )[ 0 ].innerHTML;
Wobei hier dann die umschließenden <html> und </html> Tags fehlen. Diese kannst du aber problemlos an den String ranhängen, falls dir dies wichtig ist.
Allerdings habe ich jetzt ein Problem, wenn ich das Dokument geändert habe und nun mit
den neuen Inhalt einfügen möchte. Dabei werden nämlich die <head> und <body> Tags ignoriert, was dazu führt, dass JS und CSS im <body> stehen. Damit ist natürlich die ganze Formatierung verloren. Wie kann ich das verhindern?document.getElementsByTagName( 'html' )[ 0 ].innerHTML = inhalt; -
//inhalt auslesen //inhalt-varible verändern document.write( '<html>' + inhalt + '</inhalt>' );
Wenn du allerdings nur einige Elemente im Dokument ändern willst, empfiehlt es sich mit dem Document Object Model zu arbeiten, da dies sauberer ist. http://de.selfhtml.org/javascript/objekte/document.htm -
Mit "write" funktioniert das jetzt zwar wunderbar, allerdings bemerke ich jetzt, dass ich doch
nehmen muss. Kann ich JS irgendwie automatisch den String "inhalt" in <head> und <body> - Strings umwandeln lassen? Wenn nein, wie müsste eine Funktion dafür aussehen? Dabei muss man ja einiges beachten. So könnte z.B. <head> im Text stehen und mit einer split()- Methode falsch interpretiert werden...document.getElementsByTagName( 'html' )[ 0 ].innerHTML = inhalt; -
toolz schrieb:
(..)
Kann ich JS irgendwie automatisch den String "inhalt" in <head> und <body> - Strings umwandeln lassen? Wenn nein, wie müsste eine Funktion dafür aussehen? Dabei muss man ja einiges beachten. So könnte z.B. <head> im Text stehen und mit einer split()- Methode falsch interpretiert werden...
document.getElementsByTagName( 'HEAD' )[ 0 ].innerHTML = headerinhalt; /* und */ document.getElementsByTagName( 'BODY' )[ 0 ].innerHTML = bodyinhalt;
oder:
<body id="dynamischer_bereich">
und
document.getElementById('dynamischer_bereich').innerHTML = bodyinhalt
schön sauber wäre:
<body id="dynamischer_bereich">
und
/* ein h1-element erzeugen */ var myH1 = document.createElement("h1"); /* ein text-element erzeugen (mit text)*/ var myText = document.createTextNode("Eine sehr dynamische Seite"); /*das text-element in das h1-element einfuegen*/ myH1.appendChild(myText); /*den ausgabebereich holen (in diesem fall <Body>)*/ var Ausgabebereich = document.getElementById("dynamischer_bereich"); /*das h1-element+den vorher eingefügten Text in den ausgabebereich "anhängen" */ Ausgabebereich.appendChild(myH1);
wobei bei der letzten Methode nicht einfach alles überschrieben wird sondern nur neue Elemente angehängt werden.
Hättest Du DIr das hier angeschaut:
bladehunter schrieb:
Wenn du allerdings nur einige Elemente im Dokument ändern willst, empfiehlt es sich mit dem Document Object Model zu arbeiten, da dies sauberer ist. http://de.selfhtml.org/javascript/objekte/document.htm
wäre Deine Frage gar nicht erst aufgekommen
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
