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 !