innerHTML et eval...

Version imprimable

Voir 40 message(s) de cette discussion en une page

08/01/2006, 18h24
GregPeck

innerHTML et eval...
Salut !

J'ai un petit problème qui me parait insurmontable...

J'ai une page "A.HTML" contenant ceci:
Code:

1 2 3 4 5 6 <html> <body> <script language="javascript">alert('bonjour')</script> Text en <b>HTML</b> </body> </html>
J'ai également une autre page B.php qui contient des fonctions ajax pour mettre le contenu d'une page dans un div, ca donne à peu pres ça:
Code:

1 2 3 4 5 6 7 8 <html> <body> <div id='test'></div> <script language='javascript'> ajax_GET('A.HTML', 'test'); //Affiche la page A.HTML dans le div 'test' </script> </body> </html>
En gros dans la fonction ajax_GET, je vais un :
Code:

1 2 3 4 ... ... Fonctions ajax ... document.getElementById('test').innerHTML = xhr_object.responseText
Voilà, maintenant que le décor est posé, voici mon problème.
Le innerHTML vas bien m'afficher "Text en HTML" mais ne vas pas éxécuter le javascript.
Si je fait ça à coup d'éval, il vas planter direct en essayant de faire eval('<body>...');

Voilà ! Alors comment faire pour que j'ai une sorte de fonctionnement qui fasse un innerhtml sur l'html et un eval sur le javascript ?

Merci !

avec un truc comme ça :

Code:

1
2
3
4
5
6
 
document.getElementById('test').innerHTML = xhr.responseText;
scripts = document.getElementById('test').getElementsByTagName("script");
for(var i=0;i<scripts.length;i++){
	eval(scripts[i].firstChild.nodeValue);
}

08/01/2006, 20h42
GregPeck
Salut, je la sens bien ta technique mais avec une page contenant juste:

Code:

<script language="javascript">alert("ok");</script>

Il me trouve bien un élément, mais si je fait ça: (je ne sais pas si c'est la bonne technique, mais c'est celle qui se rapproche le plus de print_r):
Code:

1 2 3 4 5 aa=""; for (p in scripts[0]) { aa=aa+ (p +" => "+scripts[p]+"\n"); } alert (aa);
J'obtient la liste des éléments, mais ils sont tous à "undefined" (y compris firstChild) donc forcément, il aime pas trop eval(scripts[i].firstChild.nodeValue);

As tu une idée d'où cela peux venir ?

la tu parcours les propriétés de l'objet, pas sa descendance ;)
Code:

1 2 3 4 5 6 for(var i=0;i<scripts.length;i++){ for(var j=0;j<scripts[i].childNodes.length;j++){ alert(scripts[i].childNodes[j].nodeName+" => "+scripts[i].childNodes[j].nodeValue); } }
EDIT
effectivement ca marche pas dans ie :oops:
je vais regarder si un coup de nodecleaner regle pas ça ;)

bon en fait, ie recréé pas de noeud a l'intérieur donc voici la solution "cross-browser" :
Code:

1 2 3 4 5 6 document.getElementById('test').innerHTML = xhr.responseText; scripts = document.getElementById('test').getElementsByTagName("script"); for(var i=0;i<scripts.length;i++){ eval(scripts[i].innerHTML); }
et pas innerText car la pour firefox c est pas du texte :mouarf:

08/01/2006, 21h18
GregPeck
Nickel ! Maintenant plus dur (désolé), si dans ma page que j'éval j'ai des déclarations de fonctions, elle se plus accessible dans ma page parent.

Je n'y comprend pas grand chose mais je suppose que c'est parce que je fait mes eval à l'intérieur d'une méthode d'un object XMLHttpRequest ?
Code:

1 2 3 4 5 6 xhr_object.onreadystatechange = function() { ... eval (scripts[i].innerHTML); ... }
Si c'est bien le cas, il y a une méthode pour que mes déclarations de fonctions soit accessible ?

Merci encore.

bon alors,
je voulais pas t'embeter avec ca mais la tu m'y oblige :D

il faut passer par la reponse XML et reconstruire chaque élément un à a un !!

mais surtout, il faut rajouter :

Code:

1
2
 
 xhr_object.overrideMimeType('text/xml');

apres ta création :

Code:

xhr_object = new XMLHttpRequest();

ça c'est pour firefox et les autres, ça t'évitera de rajouter le prologue xml a tes pages :D

ensuite tu rajoutes ces deux fonctions dans ton head :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
function clone(elem){
		if(elem.nodeName == "#text")
			return elem;
 
		c = document.createElement(elem.nodeName);
		if(elem.hasAttributes()){
			for(var i=0;i<elem.attributes.length;i++){
				var curr = elem.attributes[i];
				c.setAttribute(curr.name,curr.value);	
 
			}
		}
		return c;
	}
 
function addChild(par,enf){
		if(enf.childNodes.length > 0){
			var tmpe = new Array();
			while(enf.childNodes.length > 0){
				var elem = enf.removeChild(enf.firstChild);
				tmpe.push(elem);
			}
			if(enf.parentNode){
				var epar = enf.parentNode;
				var el = epar.removeChild(enf);
				par.appendChild(clone(el));
			}
			else
				par.appendChild(clone(enf));
			var cmpt=0;
			while(tmpe.length>0){
				this.addChild(par.lastChild,tmpe.shift());
				cmpt++;
			}
		}
		else{
			par.appendChild(clone(enf));
		}
	}

et au lieu de faire un innerHTML :

Code:

1
2
3
 
addChild(document.getElementById('test'),xhr_object.responseXML.documentElement);
toto();

avec b.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<html>
 <body>
  <script type="text/javascript">
function toto(){
  alert('bonjour');
}
  </script>
  Text en <b>HTML</b>
 </body>
</html>

08/01/2006, 22h05
GregPeck
C'est tout ? :lol:

Avant de commencer à me triturer le cerveau sur ton code, je viens d'essayer de faire
Code:

1 2 3 4 5 xhr_object.onreadystatechange = function() { ... document.eval (scripts[i].innerHTML); ... }
Depuis que j'ai rajouté "document", mes fonctions sont accessibles de partout...

EDIT: Ah non, IE aime bien eval, mais pas document.eval :pleure:
08/01/2006, 22h30
siddh

oui eval est une méthode de window ;)

alors, clone permet de "cloner" un élément.

on ne peut pas utiliser cloneNode car la réponse te retourn des objets xmldom et pas des éléments html ....

Du coup, clone va créer un élément html correspondant à l'objet xml.

addChild est la pour parcourir toute l'arborescence de tes noeuds pour les cloner un à un.

;)
08/01/2006, 22h34
GregPeck

Citation:

Envoyé par siddh

la réponse te retourn des objets

Sympa le mélange franco/js :lol:

Bon aller je vais me lancer la dessus alors, merci pour tes conseils.
Je sens que je vais y passer la soirée moi...

Je laisse le topic ouvert en cas de soucis...
08/01/2006, 22h37
siddh

mdr oui en fait j'ai oublié un e :aie:

bon courage,
09/01/2006, 00h18
GregPeck

Bon alors j'ai bien compris tout ton code, enfin je pense:

Le code duplique l'architecture de b.html et la met en sous élément de mon div 'test'.

Mais mes scripts javascripts ne seront pas pour autant éxécutés ! ?
Pour les éxécuter, je dois donc quand même passé par le eval. Mais ce eval étant dans la méthode onreadystatechange de mon object xhr_object, les fonctions déclarées ne seront pas accessible via le reste de mon document !

Ou alors j'ai loupé une étape ?
09/01/2006, 00h36
siddh

normalement ils le seront car la tu les recréé,
enfin chez moi ça marche sous ie et ffx 1.5,
avec ou sans fonction
09/01/2006, 00h53
GregPeck

Ok bon j'ai commencé à intégrer.
Je comprend pas bien, j'ai fait un copier/coller et sous IE ça ne fonctionne pas, je m'en inquieterais plus tard.

Donc pour l'instant, ça à l'air de vouloir le faire sous ffx, mais j'ai des messages "Erreur d'analyse XML : entité non définie dès qu'une ligne contient  ", sais tu pourquoi ?
Le moteur d'analyse utilise un DTD particulier ?
09/01/2006, 00h57
siddh

non c'est juste que là tu es en xml donc c'est pas   mais

Citation:

& # 160 ;

:?
sans les espaces :D
et normalement ça marche dans ie aussi (enfin chez moi en tout cas)
09/01/2006, 01h15
GregPeck

Holala, je crois que je vais en baver moi !!
Je te confirme que ça fonctionne, il me reste maintenant à modifier toutes mes pages qui était avant des iframes et qui deviennent des div...

Merci pour tous ses conseils, reste plus qu'a bosser maintenant !
09/01/2006, 01h21
siddh

bon courage ;)
09/01/2006, 09h16
SpaceFrog
juste pour jeter de l'huile sur le feu...
Code:

1 2 3 4 5 6 xhr_object.onreadystatechange = function() { ... window[scripts[i].innerHTML]; ... }
j'ai pas testé mais c'est une piste ...
10/01/2006, 19h28
GregPeck

Citation:

j'ai pas testé mais c'est une piste ...

Testé et pas approuvé :?

Siddh, j'ai repris ta fonction clone(elem) dans une autre utilisation mais il y a quelques chose que je ne comprend pas bien...

Cette fonction ne clone pas les sous éléments... si par exemple j'essai de cloner un tr, je n'ai aucun td (dans childNodes) dans l'élément cloné, normal ?

Merci encore, tu m'a fait découvrir des trucs excellent en javascript, je m'éclate, je comprend maintenant beaucoup mieux la force de js !
10/01/2006, 19h34
GregPeck

C'est bon j'ai compris l'intéret de addChild et de ses appels récursifs :lol:

Quelques petites modifs pour que l'élement à cloner de soit pas effacé et le tour est joué.

Merci encore.

Voir 40 message(s) de cette discussion en une page