HTML-Code wird nicht "erkannt"

[DataFox]

Hi Leute!

Ich habe hier ein sehr seltsames Problem. In einem externen JavaScript befindet sich eine String-Variable, welche einen HTML-Code enthält. Im HTML-Code dieser Variable befinden sich Links, DIV-Container mit id's, aber auch JavaScript-Tags mit JavaScript Code.

Der HTML-Code wird einem DIV-Container zugewiesen. Dieser war bereits zuvor mit ähnlichem Code gefüllt, nur dieses mal sind diverse Texte anders:

var htmlCode = "<div id=\"menu\">Funktioniert nicht...</div>...";
document.getElementById('div_container').innerHTML = htmlCode;

Wie erwartet ist der HTML-Code nun auf der Website sichtbar und es scheint alles zu funktionieren!

Aber: Versucht mal, das Element mit der id="menu" anzusprechen. Aus irgend einem Grund sind die Elemente zwar da, aber von JavaScript nicht ansprechbar! Auch die JavaScript-Codes in script-tags werden nicht ausgeführt!

Ich kann mich noch gut dran erinnern das ich solche Probleme auch schon mit Ajax hatte, wenn man einfach einen DIV-Container mit HTML-Code befüllt: Die HTML-Elemente sind zwar da, aber sind praktisch "tot", man kann sie nicht ansprechen. Für JavaScript sind sie unsichtbar.

Nun die Frage an die Experten: Welche Möglichkeiten habe ich, um Teile einer Website clientseitig durch anderen HTML-Code zu ersetzen, ohne auf die höchst umständliche Generierung mit createElement-Funktionen zurück zu greifen (denn der neue HTML-Code liegt mir in genau der Form vor, wie er im Quelltext stehen soll)?

Ich habe hier nicht die Möglichkeit Serverseitig den HTML-Code einzufügen...

Gruß
Laura

 

[Gumbo]

Es wäre besser wenn du direkt das DOM veränderst.

 

[DataFox]

Meinst Du damit die createElement & Co Funktionen?

Dann müsste ich den HTML-Code aus der Variable irgendwie parsen und in einer schwergewichtigen Funktion Die Struktur manuell wiederherstellen, so wie sie als Klartext-Vorlage in der Variable gegeben ist...(?)

Gruß
Laura

 

[Gumbo]

Ich habe gerade mal deinen Code probiert. Bei mir funktioniert’s.

<div id="div_container"></div>
<script type="text/javascript">
	var htmlCode = "<div id=\"menu\">Funktioniert nicht...</div>...";
	document.getElementById('div_container').innerHTML = htmlCode;
	alert(document.getElementById("menu").innerHTML);
</script>

 

[DataFox]

Ich habe meinen Code natürlich stark zusammen geschnitten... in der Variable befinden sich ca. 30 kb an HTML-Code, sehr komplex mit sehr vielen Elementen, darunter auch JavaScript-Tags. Also Quasi

<script type="text/javascript">alert(123);</script>

Das musste Dir so vorstellen: Du schnappst Dir mit getElementById das DIV, in dem dieses Forum hier enthalten ist. Und dann nimmst Du eine Variable, wo genau dieses Forum drin ist, aber mit anderen Texten (übersetzte Texte). Das ganze Ding weist du dann dem DIV zu. Das alte wird durch das neue ersetzt, aber beim alten Code kamen in etwa die selben Elemente vor, sprich auch die gleichen id's usw.

Vielleicht klemmt's genau daran. Aber bei mir wird auch nicht der Inhalt der script-Tags interpretiert, bei einem alert kommt nichts. Es scheint, als ersetzt der Browser zwar die Elemente durch neue, die dann auch angezeigt werden, nur aus Sicht des DOM sind die "tot", weil id's immer noch auf jetzt nicht mehr vorhandene Elemente zeigen bzw. mit den alten, jetzt aber durch neue überschriebenen Elemten verknüpft sind.

Vielleicht muss man vorher mit einer DOM-Methode den DIV-Container "sauber" leeren, so das alle Elemente wirklich "vergessen" sind, also auch alle zugewiesenen id's. Und dann das "neue" rein, was fast zu 95% dem alten entspricht...?

Edit: Habe gerade nochmal zur Sicherheit etwas einfaches probiert. Ein DIV mit der id "infoMSG", wo nichts drin ist. Diesem DIV weise ich nun per innerHTML ein JavaScript-Tag zu, das einen alert ausgeben soll:

document.getElementById('infoMSG').innerHTML = "<script type=\"text/javascript\">alert(123);</script>TEST";

anschließend sehe ich im Browser den String "TEST". Aber es kommt kein alert.
So schaut es im Quelltext laut FireBug im FireFox aus:

<div id="infoMSG">
<script type="text/javascript">
alert(123);
</script>
TEST
</div>

Das Script-Tag mit dem alert ist also vorhanden, wird aber nicht umgesetzt. Gibt es vielleicht eine Methode in JavaScript welche sowas "belebt"?

Gruß
Laura

 

[Quaese]

Hi,

ich denke, der HTML-Code wird richtig eingetragen, die Scripts müssen aber erst "ausführbar" gemacht werden. Sven Mintel hat hier einen Workaround vorgestellt. Vielleicht biringt dich das der Lösung näher.

Ciao
Quaese

 

[DataFox]

Hi, danke für den Link zum Workaround!

Im Firefox klappt es wunderbar:

String.prototype.eval_js = function(){
	d=document.createElement('div');
	d.innerHTML=this;
	c='';
	for(s=0;s<d.getElementsByTagName('script').length;++s) {
		c+=d.getElementsByTagName('script')[s].innerHTML;
	}
	eval(c);
	delete d;
}

String(document.body.innerHTML).eval_js();

der Internet-Explorer meldet aber in der Zeile

String(document.body.innerHTML).eval_js();

einen "Syntaxfehler" (habe die MSIE-Developer-Toolbar mit JS-Debugger, leider liefert der hier keine genauere Info als einfach nur "Syntaxfehler").

Wenn ich das hier ausführe:

String("<script type=\"text/javascript\">alert(123);</script>").eval_js();

kommt zwar nicht die "Syntaxfehler"-Meldung, aber dafür passiert einfach gar nichts...

Habt ihr eine Idee, was an diesem Code dem MSIE nicht so richtig schmeckt?

Gruß
Laura

 

[Gumbo]

Du musst es etwas verändern:

"<script type=\"text/javascript\">alert(123);\x3C/script>".eval_js()

Das „</script>“ schloss des JavaScript-Block verfrüht ab.

 

[DataFox]

Hi,

danke für den Tipp... ich verstehe aber nicht ganz, was Du meinst. Der Alert befindet sich doch genau in einem JS-Block, oder?

Aber der MSIE gibt nun tatsächlich keine Fehlermeldung mehr an dieser Stelle. Dafür aber an dieser:

String.prototype.eval_js = function(){
	d=document.createElement('div');
	d.innerHTML=this;
	c='';
	for(s=0;s<d.getElementsByTagName('script').length;++s) {
		c+=d.getElementsByTagName('script')[s].innerHTML;
	}
	eval(c);
	delete d;
}

der Script Debugger von der MSIE-Dev-Toolbar stoppt bei eval(c); ohne Meldung. Also keinerlei Text / Hinweis. Nix. Es wird nur diese Zeile gelb markiert.

Vermute das obiger Code nicht MSIE-Kompatibel ist?

Habe auch folgendes probiert:

String.prototype.eval_js = function(){
	d=document.createElement('div');
	d.innerHTML=this;
	c='';
	for(s=0;s<d.getElementsByTagName('script').length;++s) {
		c+=d.getElementsByTagName('script')[s].innerHTML;
	}
	try {
		eval(c);
	} catch(e) {
		;
	}
	delete d;
}

der try-catch-block bringt hier leider nichts.

Danke Euch für die Hilfe!

Gruß
Laura

 

[FipsTheThief]

Naja wenn Du schon den Try Catch Block nutzt wäre es auch ratsam sich ne Fehlermeldung anzeigen zu lassen dann

also mit alert(e.message); zum Beispiel.

Mich beschleicht das Gefühl das es mit dem alert was zu tun hat und dem innerHTML , eval() führt ja einen String aus als sei es JavaScript Code was ist aber wenn das innerHTML dafür sorgt das es gar kein String mehr ist ?

Also probier mal das alert(123); in Anführungs Striche zu pappen eventuell nützt das was. Wobei die Methode von Sven Mintel das ja übernimmt eigentlich. Gib dir mal aus ob da überhaupt ankommt noch.