innerHTML et eval...

**GregPeck** · 08/01/2006, 18h24

Salut !

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

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 !

**siddh** · 08/01/2006, 20h16

avec un truc comme �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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);
}

**GregPeck** · 08/01/2006, 20h42

Salut, je la sens bien ta technique mais avec une page contenant juste:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 ?

**siddh** · 08/01/2006, 20h48

la tu parcours les propri�t�s de l'objet, pas sa descendance

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

je vais regarder si un coup de nodecleaner regle pas �a

**siddh** · 08/01/2006, 20h55

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**GregPeck** · 08/01/2006, 21h18

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**siddh** · 08/01/2006, 21h59

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

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

mais surtout, il faut rajouter :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

apres ta cr�ation :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

xhr_object = new XMLHttpRequest();

�a c'est pour firefox et les autres, �a t'�vitera de rajouter le prologue xml a tes pages

ensuite tu rajoutes ces deux fonctions dans ton head :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

avec b.html :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

**GregPeck** · 08/01/2006, 22h05

C'est tout ?

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**siddh** · 08/01/2006, 22h30

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.

**GregPeck** · 08/01/2006, 22h34

Envoy� par siddh

la r�ponse te retourn des objets

Sympa le m�lange franco/js

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...

**siddh** · 08/01/2006, 22h37

mdr oui en fait j'ai oubli� un e

bon courage,

**GregPeck** · 09/01/2006, 00h18

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 ?

**siddh** · 09/01/2006, 00h36

normalement ils le seront car la tu les recr��,
enfin chez moi �a marche sous ie et ffx 1.5,
avec ou sans fonction

**GregPeck** · 09/01/2006, 00h53

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 ?

**siddh** · 09/01/2006, 00h57

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

& # 160 ;

sans les espaces

et normalement �a marche dans ie aussi (enfin chez moi en tout cas)

**GregPeck** · 09/01/2006, 01h15

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 !

**siddh** · 09/01/2006, 01h21

bon courage

**SpaceFrog** · 09/01/2006, 09h16

juste pour jeter de l'huile sur le feu...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
xhr_object.onreadystatechange = function() {
  ...
  window[scripts[i].innerHTML];
  ...
}

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

**GregPeck** · 10/01/2006, 19h28

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 !