innerHTML et eval...

Version imprimable

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.
10/01/2006, 19h34
siddh

Citation:

Envoyé par GregPeck

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 ?

euh ben si elle est censé le faire.
Enfin sous firefox ça marchera c'est sur, sous ie, y a des bugs :twisted:
par exemple apparement ca marche pas sur un <option> dans ie 8O
Mais sur un tableau ça devrais marcher.
En fait c'est addChild qui fais le recursif et qui clone element par element.

ie va peut etre pas aimer hasAttributes() dans clone, tu peux le remplacer par :

Code:

if(elem.attributes.length > 0)

Citation:

Envoyé par GregPeck

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 !

Oui en se plongeant un peu dans le cambouis de js, on devient vite accro car on se rend compte de sa réelle puissance ;)
10/01/2006, 19h39
GregPeck

Citation:

Envoyé par GregPeck

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

Citation:

Envoyé par siddh

En fait c'est addChild qui fais le recursif

Comme quoi j'avais bien compris :wink:

IE commence à me brouter sévere et le problème c'est que je ne vais pas asser souvent vérifier que le code fonctionne aussi sous IE. Je suis souvent obligé de faire une grande marche arrière, c'est lourd..
A+
10/01/2006, 20h06
siddh

Citation:

Envoyé par GregPeck

IE commence à me brouter sévere et le problème c'est que je ne vais pas asser souvent vérifier que le code fonctionne aussi sous IE. Je suis souvent obligé de faire une grande marche arrière, c'est lourd..
A+

+100 :mouarf: :twisted:

pareil pour moi
17/01/2006, 00h41
Spack

Avez vous trouver comment rendre cette fonction compatible avec IE car ça fonction bien sous FF mais aucun résultat avec IE :evil:
17/01/2006, 00h48
GregPeck

Tu parle des fonctions addChild et clone ?

Si oui, je les ai tellement modifier qu'elles ne ressemble plus au code d'origine (d'ailleurs elle ne ressemble plus à rien :( ). Mais c'est peux être à cause de ce bug que ça ne fonctionne pas:

http://javascript.developpez.com/faq...M#DOMIEFirefox

Et voici un nodecleaner:

http://www.developpez.net/forums/vie...863087#1863087
17/01/2006, 01h01
siddh

euh ca marche avec ie normalement,
le problème doit venir d'ailleurs mais effectivement ça peut pas faire de mal de passer au node cleaner

En fait je pense que c'est parce que je charge mal le fichier XML

Code:

1
2
3
4
5
6
...
else if (window.ActiveXObject) {
            this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
			this.xmlDoc.onreadystatechange = function() { if (this.xmlDoc.readyState == 4) this.loaded = true; }
		    this.xmlDoc.load(url);
}

Avec ça je peut accéder aux données mais les fonction clone et addChild ne semble pas fonctionner et j'ai l'erreur

Citation:

'this.xmlDoc.readyState' a la valeur Null ou n'est pas un objet

J'ai aussi essayé comme ça

Code:

1
2
3
4
5
6
7
8
9
...
else if (window.ActiveXObject) {
      		try {
                this.xmlDoc = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                this.xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
            }
            this.xmlDoc.onreadystatechange = function() { if (this.xmlDoc.readyState == 4) this.loaded = true;}
            this.xmlDoc.open('GET', url, true);

Mais au chargement de la page j'ai une boite de dialogue avec Object Error :?

17/01/2006, 04h36
siddh

euh tu récupère jamais le responseXML ?
http://siddh.developpez.com/articles/ajax/

Ca change du sujet initial mais la discussion a déjà commencé ici donc j'expose mon problème...

En fait je n'arrive pas à placer le responseXML voici comment mon code se présente: j'ai deux classes, une qui s'occupe de parser un fichier XML c'est aussi cette classe qui s'occupe de charger le fichier, l'autre classe elle traite les données en prenant en paramètre l'objet créé par la classe précédente...
Code:

1 2 3 4 5 6 7 8 ... var news = new xmlParser(); var post = new xmlManager(news); news.loadXML('./news.xml'); ... <body onload="post.buildNews()"> ...
loadXML :
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 function loadXML(url) { /* chargement du fichier XML */ try { // navigateur basé sur Gecko if (document.implementation && document.implementation.createDocument) { this.xmlDoc = document.implementation.createDocument('', 'doc', null); this.xmlDoc.load(url); // à l'aide de lobjet XMLHTTPRequest } else if (window.XMLHttpRequest) { this.xmlDoc = new XMLHttpRequest(); this.xmlDoc.overrideMimeType('text/xml'); this.xmlDoc.onreadystatechange = function() { if (this.xmlDoc.readyState == 4) this.loaded = true; } this.xmlDoc.open('GET', url, true); this.xmlDoc.send(null); // ActiveX pour Internet Explorer } else if (window.ActiveXObject) { try { this.xmlDoc = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { this.xmlDoc = new ActiveXObject("Microsoft.XMLHTTP"); } this.xmlDoc.onreadystatechange = function() { if (this.xmlDoc.readyState == 4) this.loaded = true; } this.xmlDoc.open('GET', url, true); this.xmlDoc.send(null); } } catch (e) { alert(e); return false; } return true; }
Il me faut donc xmlDoc comme étant un objet XML ce que me retourne this.xmlDoc = document.implementation.createDocument('', 'doc', null); par contre les autres test me retourne un objet xhr dans lequel se trouve l'objet XML qui m'intéresse responseXML...

Jusque là je ne vous apprend rien :) ...
Le problème c'est que dans cette fonction responseXML est null et d'après ce que j'ai pu constater il ne se remplit que lorsque je sort de la classe ou un truc du genre...

Pour résumer, responseXML est vide lors du chargement mais est remplit lorsque j'arrive à la fonction buildNews de la classe xmlManager :? !!! Du coup lors du chargement, je ne peux pas faire

Code:

this.xmlDoc = this.xmlDoc.responseXML;

vu que celui-ci est vide... :twisted:

J'espère que vous avez réussit à me suivre :D ...

hum, je voit deja pas trop a quoi ca sert de faire :
Code:

1 2 3 4 5 6 7 if (document.implementation && document.implementation.createDocument) { this.xmlDoc = document.implementation.createDocument('', 'doc', null); this.xmlDoc.load(url); // à l'aide de lobjet XMLHTTPRequest }
Ensuite, pourquoi mettre deux onreadystatechange différents ?

Et c'est justement a cet endroit là que tu vas récupérer le responseXML.
Enfin tu vas meme pas lui affecter puisque le responseXML est déja dedans !!!!

Mais comment faire après pour accéder aux fonctions de mon parseur afin de traiter le fichier??? :?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function xmlParser()
{
	/* méthodes de la classe */
	this.loadXML 				  = loadXML;					// chargement du fichier XML
	this.clean 					  = clean;						// supprime les espaces du fichier XML
	this.countNode				  = countNode;					// compte le nombre de noeud
	this.getRoot 				  = getRoot;					// obtenir la racine du document
	this.getParent 				  = getParent;					// obtenir le parent d'un noeud
	this.getChild 				  = getChild;					// obtenir les fils d'un noeud
	this.getNode 				  = getNode;					// obtenir les noeuds selon la balise
	this.getNodeName 			  = getNodeName;				// obtenir le nom du noeud
	this.getNodeValue 			  = getNodeValue;				// obtenir la valeur du noeud
	this.getAttributeValue 		  = getAttributeValue;			// obtenir la valeur des attributs d'un noeud
	this.findNodeByValue 		  = findNodeByValue;			// recherche un noeud par sa valeur
	this.findNodeByAttributeValue = findNodeByAttributeValue;	// recherche un noeud par la valeur de son attribut
 
	/* membres publiques */
	this.xmlDoc;												// objet contenant le fichier XML
	this.loaded = false;										// état de chargement du fichier XML
}

Je ne peux pas faire xmlDoc.responseXML.getNode(); par exemple...
Je commence à avoir mal à la tête moi...

18/01/2006, 18h30
siddh

pour l'exploitation du responseXML, c'est le documentElement du responseXML qu'il faut manipuler avec le DOM
18/01/2006, 21h42
Spack
J'arrive maintenant à exploiter le fichier XML avec xhr mais une dernière question car je trouve que la technique employé "pas très propre"...

En fait, je ne vois pas quand responseXML se remplit or à la sortie de ma fonction loadXML je ne veux pas un objet xhr mais un objet xml donc puisqu'il est remplit dans la classe qui traite le fichier je fais...

Code:

obj.xmlDoc = obj.xmlDoc.responseXML.documentElement;

mais j'aurrais préféré que cela soit fait dans la fonction loadXML...

J'ai essayé
Code:

1 2 3 this.xmlDoc.onreadystatechange = function() { if (this.xmlDoc.readyState == 4) this.xmlDoc = this.xmlDoc.responseXML.documentElement; };
dans la fonction loadXML mais ça ne marche pas et me retourne toujours xmlDoc comme un objet xhr...

Comment faire pour avoir un objet xml à la sortie de ma fonction loadXML???
18/01/2006, 21h48
siddh

tu ne peux pas car c est une discussion asynchrone !

sinon tu peux faire une discussion synchrone qui bloquera le traitement tant que tu n'as pas eu la réponse.

Auquel cas, plus besoin du onreadystatechange.

Tu construit ton xhr, tu envoie la requete en lui passant false en 3eme argument du open et à la ligne en dessous tu fais un return du responseXML.documentElement
18/01/2006, 22h13
Spack

Très bien merci beaucoup de ton aide...
Mais là étant en synchrone, cela veut dire que ma page html arrêtera de se charger tant que le fichier XML n'aura pas finit de se charger???
Je ne pense pas que ça sera un problème sauf si le fichier XML est très gros...
18/01/2006, 22h21
siddh

Tu as tout compris ;)