[JS] Text aus IFrame per Javascript auslesen

[PatrickB]

Hi,

ich bin gerade dabei ein "Formular" mit einem IFrame zu erstellen. Besser gesagt will ich für ein Forum den Teil erstellen wo man neue Themen erstellen kann. Und das IFrame bildet den Teil wo man den Text reinschreibt. In dem IFrame kann man dann auch den Text fett, kursiv, farbig.... machen. Sowas wie es vorher hier im Klammforum gab.
Jetzt hab ich ich aber das Problem das ich zuerst mit Javascript testen will ob auch genug Buchstaben geschrieben worden sind. Aber irgendwie kann ich nicht auf das IFrame zugreifen.

Meine Frage also:

Wie kann ich mit Javascript auf den Html Code oder die geschriebenen Zeichen zugreifen.
Danach muss ich alles ja auch noch per PHP in einer Datenbank speichern können.

 

[topfklao]

Sowas wie es vorher hier im Klammforum gab.
....

Das gibts doch noch immer...

Aber back zu deiner Frage:

Wie man das jetzt ganz genau macht weiß ich ned.
Dafür könnt ich dir eine ganze Liste mit Programmen geben, die das können:

https://www.htmlarea.com/directory/Web_Software_Components/WYSIWYG_Editors/index.html

Einfach mal durchsehen. Sind viele Freeware Programme dabei, die wirklich ned schlecht sind..

 

[theHacker]

Wie kann ich mit Javascript auf den Html Code oder die geschriebenen Zeichen zugreifen.

Laut meinem DOM-Inspector könnten folgende Eigenschaften interessant sein:

document.getElementById("iframe_id").contentDocument
document.getElementById("iframe_id").contentWindow.document
​

Is aber sehr wahrscheinlich, dass beide Eigenschaften auf dasselbe document-Objekt zeigen.

 

[PatrickB]

Laut meinem DOM-Inspector könnten folgende Eigenschaften interessant sein:

document.getElementById("iframe_id").contentDocument
document.getElementById("iframe_id").contentWindow.document
​

Is aber sehr wahrscheinlich, dass beide Eigenschaften auf dasselbe document-Objekt zeigen.

Mh...also ich habs jetzt mit beiden probiert, hat aber nicht geklappt.
Wahrscheinlich mach ich was falsch. So siehts aus:

<script language=JavaScript>
function checkform() 
{
   if(window.document.form1.threadname.value.length < 4)
   {
   alert("Der Titel muss mehr als 3 Zeichen lang sein!");
   return false;
   }
   if(document.getElementById("editbox").contentWindow.document.length < 4)
   {
   alert("Die Nachricht muss mehr als 3 Zeichen lang sein!");
   return false;
   }
}
</script>

und das IFrame:

<iframe name="message" id="editbox" width="500" height="200" src="empty.php" marginheight="0" marginwidth="0">Ihr Browser unterstützt leider keine IFrames.</iframe>

die Datei emtpy.php ist nur dazu da damit der Hintergrund des IFrames weiß wird.


EDIT: Die erste Javascript abfrage klappt, da das input feld auf der gleichen seite und in keinem frame ist.

 

[theHacker]

if(document.getElementById("editbox").contentWindow.document.length < 4)

Du weißt schon, dass das Ding n document-Objekt is
Wenn du an den Inhalt willst, kannst du über die childNodes[] ran.

Nutzt du Firefox ? Lad dir den DOM-Inspector und geh selber auf die Suche, nach dem, was du finden willst. Is einfach klasse für so einen Job

 

[PatrickB]

Du weißt schon, dass das Ding n document-Objekt is
Wenn du an den Inhalt willst, kannst du über die childNodes[] ran.

Nutzt du Firefox ? Lad dir den DOM-Inspector und geh selber auf die Suche, nach dem, was du finden willst. Is einfach klasse für so einen Job

Ok danke, ich versuchs mal. Ja, ich benutz NATÜRLICH Firefox .
Ich meld mich dann wieder

EDIT: Hab grad gemerkt das ich den schon habe. Aber wie er funktioniert versteh ich nicht

 

[PatrickB]

Jetzt hab ich es anderst gemacht, aber es klappt fast.

document.getElementById('editbox').contentWindow.document.body.innerHTML

Damit bekomm ich den ganzen HTML Code, also auch die formatierungen und so.

document.getElementById('editbox').contentWindow.document.body.innerHTML.length

Damit bekomm ich die Länge. Aber wenn garnichts drin steht bekomm ich die Zahl 5. Aber wenn was drin steht wird mir immer die Anzahl der HTML Zeichen ausgegeben + 1.

Gibt es auch eine Eigenschaft die nur die Zeichen ohne die HTML Elemente zählt?

(So, bin kurz essen )

 

[theHacker]

EDIT: Hab grad gemerkt das ich den schon habe. Aber wie er funktioniert versteh ich nicht

Geh im Menü auf "Suchen/Knoten suchen...". Suche nach dem Tag "IFRAME" oder besser gleich gleich nach der ID "editbox".

Auf der rechten Seite schaltest du dann auf "Javascript Object", dann kannst du alle Eigenschaften des Objektes sehen und solange durchbrowsen, bis du das gefunden hast, was du suchst.

 

[PatrickB]

So, ich hab bis jetzt diesen Code:

	<script language=JavaScript>
				function checkform() 
				{
					if(window.document.form1.threadname.value.length < 4)
					{
					alert("Der Titel muss mehr als 3 Zeichen lang sein!");
					return false;
					}
					if(document.getElementById("editbox").contentWindow.document.childNodes.length < 4)
					{
					alert("Die Nachricht muss mehr als 3 Zeichen lang sein!");
					document.getElementById('editbox').contentWindow.document.body.innerHTML.length;
					var b = document.getElementById('editbox').contentWindow.document.body.innerHTML;
					alert(b);
					var c = b.match(/<.*>/gi);
					alert(c.length);
					var a;
					for(var i = 0; i < c.length; i++;)
					{
					a = b.replace('<*>','');
					}
					alert(a);
					return false;
					}
				}
				</script>

Ich schau also wieviele Zeichen enthalten sind.
Dann will ich schauen wieviele tags es gibt. Das versuche ich mit match zu machen, aber ich hab echt kp wie das funktioniert. Aber du kannst das doch so gut . Kannst mir vielleicht sagen wie ich das überprüfe? Den ich will wissen wieviele tags drin sind damit ich in der for-Schleife es dann so oft wie es gefunden wurde ersetzen kann. Wenn ich nämlich nur replace angebe, wird es ja leider nur 1x ersetzt.

 

[PatrickB]

Habs jetzt gelöst bekommen.

Falls es jemand braucht:

document.getElementById("editbox").contentWindow.document.body.innerHTML.replace(/<\/?[^>]+>/gi, "").

-> Close