[Erledigt] Html Code aus einer JavaScript Variable formatieren?

M1N€R2010 · 08.03.2011, 14:40

Guten Tag,
ich nutze momentan eine JavaScript Variable. In dieser wird ein html Code gespeichert. Die Variable hat den Namen "htmlcode". Nun gebe ich den Code über ein iFrame aus. Das Problem ist die Formatierung. Ich würde gerne den Code einrücken oder zumindest einzelne Tags farblich hervorheben.

Ist so etwas mittels JavaScript möglich?

rudygotya · 08.03.2011, 15:57

Hier mal ein paar template Engines:

mustache
jquery templates

Mehr template engines findest du sicher per geeigneter Suchmaschine.

Für kleine Sachen kannst auch ein array missbrauchen a la:

PHP-Code:

  var foo = ([
  "<div>",
    "<span>",
      "<img src='foo.jpg' alt='' />"
    "</span>",
  "</div>",
].join(""))

nikosch · 08.03.2011, 16:01

So eine Frage hatten wir gerade erst.

M1N€R2010 · 08.03.2011, 17:24

Ich habe leider kein passendes Thema über die Suche gefunden. Das Problem ist, dass ich den Code noch vor der Ausgabe formatieren muss. Dabei dachte ich mir, dass es doch möglich sein müsste, einfach die Variable zu formatieren. Sollte so etwas klappen?

Also dass man die Funktion getElementsByTagName() auf der Variable aufruft. Ist so etwas möglich oder wie mache ich es am besten?

Das mit den Templates verstehe ich leider nicht, da ich damit noch nicht gearbeitet habe. Und wozu bräuchte ich ein Array? Der Code ist doch schon in einer Variable gespeichert.

nikosch · 08.03.2011, 17:35

Zitat:

einfach die Variable zu formatieren

Unsinn.

Zitat:

Also dass man die Funktion getElementsByTagName() auf der Variable aufruft

großer Unsinn

Hier entlang: http://www.php.de/php-einsteiger/489...nsammlung.html (Lerne Grundlagen | Quellensammlung)

M1N€R2010 · 08.03.2011, 17:43

Wie macht man es denn sonst? Ich habe es schon mit dem normalen Aufruf probiert. Es gibt keinen JS Fehler wieder. Nur sieht man keine Formatierung. Wo müsste ich es an welcher Stelle denn formatieren? In der Funktion, die in die html Vorschau wechselt? Macht man es dann einfach normal mit documents.getElementsByTagName("div")[i].style.color="ontcolor('#FF0000')"? Liegt es einfach an der Reihenfolge?

M1N€R2010 · 09.03.2011, 09:12

Ich habe nun folgendes ausprobiert, leider ohne Erfolg:

PHP-Code:

  <script type="text/javascript">
var iframe = document.getElementById('eingabe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
for (i = 0; i < innerDoc.getElementsByTagName("p").length; i++) {
    innerDoc.getElementsByTagName("p")[i].style.border = "solid red 10px";
    innerDoc.getElementsByTagName("p")[i].style.backgroundColor = "#FF9933";
    innerDoc.getElementsByTagName("p")[i].style.color = "#FFFFFF";
    innerDoc.getElementsByTagName("p")[i].style.fontSize = "250%";
  }
</script>

Wie kann ich das Problem wohl lösen? Und wann muss ich dieses aufrufen? Der Inhalt des Iframes wird mittels src geladen.

mermshaus · 09.03.2011, 16:20

Vielleicht so (nur im FF getestet):

Code:

<?php

if (isset($_GET['iframe'])) {
    echo '<p>Test</p><p>Test</p><p>Test</p>';
    exit;
}

?><!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <script type="text/javascript">

window.onload = function() {
    var iframe = document.getElementById('eingabe');

    iframe.onload = function () {
        var iframe = this;
        var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
        for (i = 0; i < innerDoc.getElementsByTagName("p").length; i++) {
            innerDoc.getElementsByTagName("p")[i].style.border = "solid red 10px";
            innerDoc.getElementsByTagName("p")[i].style.backgroundColor = "#FF9933";
            innerDoc.getElementsByTagName("p")[i].style.color = "#FFFFFF";
            innerDoc.getElementsByTagName("p")[i].style.fontSize = "250%";
        }
    };

    iframe.src = '<?php echo basename(__FILE__); ?>?iframe';
};

        </script>
    </head>

    <body>

        <iframe id="eingabe" src=""></iframe>

    </body>

</html>

M1N€R2010 · 09.03.2011, 18:24

Leider klappt es nicht. Ich würde gerne so etwas machen:
Mein Code:

Code:

<div style="font-family: Arial;" id="text"> <div id="divtext"> <div style="font-weight: bold;" class="boxdiv"> <table><tbody><tr><td><font size="2">&nbsp;<span style="color: rgb(204, 204, 204); font-weight: bold;"></span><br></font></td></tr></tbody></table> </div> <div class="eingabe"> <table><tbody><tr><td><p>

So sieht die HTML Ansicht momentan aus. Und so soll es etwa aussehen:

Code:

[RED]<div style="font-family: Arial;" id="text"> <div  id="divtext"> <div style="font-weight: bold;" class="boxdiv">  <table><tbody><tr><td><font  size="2">&nbsp;<span style="color: rgb(204, 204, 204);  font-weight:  bold;"></span><br></font></td></tr></tbody></table>  </div>[/RED]

Also dass der Code farblich abgehoben wird. Ist so etwas überhaupt möglich? Wenn ich dieses über die Tags mache, wird es auch in der normalen Ansicht anders angezeigt. Ich würde einfach nur gerne den HTML Code mittels JS färben. Wisst ihr nun, was ich genau vorhabe?

Den Code habe ich ausprobiert und es ist nichts anderes, als wenn ich getElementsByTagName in der Source Datei aufrufen würde.

mermshaus · 09.03.2011, 23:25

Zitat:

Wisst ihr nun, was ich genau vorhabe?

Du suchst vielleicht einen Syntax Highlighter?

- http://alexgorbatchev.com/SyntaxHighlighter/

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Javascript Preis in Variable	bonfires	JavaScript, Ajax und mehr	4	29.09.2010 08:35
HTML Code aus der Datenbank auslesen wie???	xxcoolxx	Datenbanken	35	07.12.2008 15:13
php code in html einbinden...	lookatme	PHP Tipps 2008	10	20.08.2008 13:09
HTML Code im PHP Datei möglich?	raphaelf	PHP Tipps 2008	10	24.07.2008 15:56
[Erledigt] HTML Code aus JavaScript ausgeben	alexxtwentyeight	JavaScript, Ajax und mehr	1	17.06.2008 08:18
Nur bestimmten Html Code zulassen?	litterauspirna	PHP Tipps 2008	5	29.04.2008 12:30
Variable und komplette HTML Datei	chrisonline	PHP Tipps 2007	3	24.05.2007 15:30
HTML Code in MySQL DB speichern	FireFIghter	Datenbanken	3	27.12.2006 15:45
Schon wieder: Javascript Variable an PHP übergeben	duerov	HTML, Usability und Barrierefreiheit	6	13.03.2006 09:27
Variable wird geändert bei Übergabe an Javascript		PHP Tipps 2007	4	17.12.2005 16:53
Mysql & HTml Code		PHP Tipps 2005-2	1	12.07.2005 04:30
Php Code als Variable definieren und in Template darstellen		PHP Tipps 2004-2	4	31.12.2004 16:22
HTML Code in Variable - GEFAHR?	Beatbox	PHP Tipps 2004-2	4	18.12.2004 14:02
JS Variable im HTML Code verwenden		HTML, Usability und Barrierefreiheit	1	05.10.2004 08:52
Variable weitergeben (über einen php code hinaus)	Paulo	PHP Tipps 2004	11	06.09.2004 12:45

08.03.2011, 14:40
M1N€R2010 Gesperrt Registriert seit: 05.03.2011 Beiträge: 43 PHP-Kenntnisse: Anfänger	[Erledigt] Html Code aus einer JavaScript Variable formatieren? Guten Tag, ich nutze momentan eine JavaScript Variable. In dieser wird ein html Code gespeichert. Die Variable hat den Namen "htmlcode". Nun gebe ich den Code über ein iFrame aus. Das Problem ist die Formatierung. Ich würde gerne den Code einrücken oder zumindest einzelne Tags farblich hervorheben. Ist so etwas mittels JavaScript möglich?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

08.03.2011, 15:57
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Hier mal ein paar template Engines: mustache jquery templates Mehr template engines findest du sicher per geeigneter Suchmaschine. Für kleine Sachen kannst auch ein array missbrauchen a la: PHP-Code: `var foo = ([ "<div>", "<span>", "<img src='foo.jpg' alt='' />" "</span>", "</div>", ].join(""))` __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

08.03.2011, 16:01
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	So eine Frage hatten wir gerade erst. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

08.03.2011, 17:24
M1N€R2010 Gesperrt Registriert seit: 05.03.2011 Beiträge: 43 PHP-Kenntnisse: Anfänger	Ich habe leider kein passendes Thema über die Suche gefunden. Das Problem ist, dass ich den Code noch vor der Ausgabe formatieren muss. Dabei dachte ich mir, dass es doch möglich sein müsste, einfach die Variable zu formatieren. Sollte so etwas klappen? Also dass man die Funktion getElementsByTagName() auf der Variable aufruft. Ist so etwas möglich oder wie mache ich es am besten? Das mit den Templates verstehe ich leider nicht, da ich damit noch nicht gearbeitet habe. Und wozu bräuchte ich ein Array? Der Code ist doch schon in einer Variable gespeichert.

08.03.2011, 17:43
M1N€R2010 Gesperrt Registriert seit: 05.03.2011 Beiträge: 43 PHP-Kenntnisse: Anfänger	Wie macht man es denn sonst? Ich habe es schon mit dem normalen Aufruf probiert. Es gibt keinen JS Fehler wieder. Nur sieht man keine Formatierung. Wo müsste ich es an welcher Stelle denn formatieren? In der Funktion, die in die html Vorschau wechselt? Macht man es dann einfach normal mit documents.getElementsByTagName("div")[i].style.color="ontcolor('#FF0000')"? Liegt es einfach an der Reihenfolge? Geändert von M1N€R2010 (08.03.2011 um 17:48 Uhr).

09.03.2011, 09:12
M1N€R2010 Gesperrt Registriert seit: 05.03.2011 Beiträge: 43 PHP-Kenntnisse: Anfänger	Ich habe nun folgendes ausprobiert, leider ohne Erfolg: PHP-Code: <script type="text/javascript"> var iframe = document.getElementById('eingabe'); var innerDoc = iframe.contentDocument \|\| iframe.contentWindow.document; for (i = 0; i < innerDoc.getElementsByTagName("p").length; i++) { innerDoc.getElementsByTagName("p")[i].style.border = "solid red 10px"; innerDoc.getElementsByTagName("p")[i].style.backgroundColor = "#FF9933"; innerDoc.getElementsByTagName("p")[i].style.color = "#FFFFFF"; innerDoc.getElementsByTagName("p")[i].style.fontSize = "250%"; } </script> Wie kann ich das Problem wohl lösen? Und wann muss ich dieses aufrufen? Der Inhalt des Iframes wird mittels src geladen.

09.03.2011, 18:24
M1N€R2010 Gesperrt Registriert seit: 05.03.2011 Beiträge: 43 PHP-Kenntnisse: Anfänger	Leider klappt es nicht. Ich würde gerne so etwas machen: Mein Code: Code: <div style="font-family: Arial;" id="text"> <div id="divtext"> <div style="font-weight: bold;" class="boxdiv"> <table><tbody><tr><td><font size="2"> <span style="color: rgb(204, 204, 204); font-weight: bold;"></span><br></font></td></tr></tbody></table> </div> <div class="eingabe"> <table><tbody><tr><td><p> So sieht die HTML Ansicht momentan aus. Und so soll es etwa aussehen: Code: [RED]<div style="font-family: Arial;" id="text"> <div id="divtext"> <div style="font-weight: bold;" class="boxdiv"> <table><tbody><tr><td><font size="2"> <span style="color: rgb(204, 204, 204); font-weight: bold;"></span><br></font></td></tr></tbody></table> </div>[/RED] Also dass der Code farblich abgehoben wird. Ist so etwas überhaupt möglich? Wenn ich dieses über die Tags mache, wird es auch in der normalen Ansicht anders angezeigt. Ich würde einfach nur gerne den HTML Code mittels JS färben. Wisst ihr nun, was ich genau vorhabe? Den Code habe ich ausprobiert und es ist nichts anderes, als wenn ich getElementsByTagName in der Source Datei aufrufen würde.