Evaluer du Javascript à la volée

**bluelambda** · 22/08/2011, 10h26

Bonsoir à tous !

Je ne comprends pas pourquoi le script suivant fonctionne bien sous Firefox, Chrome et Opera, mais pas sous Internet Explorer 7.
Peut être que quelqu'un saura m'éclairer ?

Le but de ce script est d'évaluer à la volée une chaine contenant des scripts Javascript ainsi que du HTML.
Il peut y avoir plusieurs scripts dans la chaine, mélangés avec du HTML.
Pour l'exemple, la chaine contient uniquement un script affichant "Test" dans une box alert.

Test.html:

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
<body>
	<script type="text/javascript">
			var element = document.createElement('div');
			document.body.appendChild(element);
			element.innerHTML = "<script type=\"text/javascript\">alert('Test');<\/script>";
			var scripts = element.getElementsByTagName("script");
			for(var i=0; i<scripts.length; i++)
			{
				if (window.execScript)
					window.execScript(scripts[i].text.replace('<!--',''));
				else
					window.eval(scripts[i].text);
			}
	</script>
</body>

Au chargement de Test.html, on devrait voir une box alert affichant "Test". Ce n'est pas le cas sous IE.
Ne cherchez pas la logique de ce code, c'est juste un exemple :p j'ai pris que la partie utile de mon code pour décrire le bug que je rencontre.

Le problème est visiblement lié à element.getElementsByTagName("script"), qui ne trouve aucun script avec IE, puisque scripts.length vaut 0.

Quelqu'un sait-il pourquoi ça ne fonctionne pas sous IE ?

Je vous remercie et... bonne nuit !

**zeclad01** · 22/08/2011, 10h30

Pourquoi tu échappes le slash de ta balise script ?

EDIT : Exact je suis bête :p

**SpaceFrog** · 22/08/2011, 10h49

ben sinon cette balise sera comprise comme la balise de fermeture du script courant, et pas comme du string html ...

Il y a un post ou une contribution sur l'ajout d'une balise script dynamiquement en passant par le DOM

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.createElement('script')

une petite recherche et tu trouveras ton bonheur ...

**bluelambda** · 22/08/2011, 11h16

Envoyé par SpaceFrog

Il y a un post ou une contribution sur l'ajout d'une balise script dynamiquement en passant par le DOM

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.createElement('script')

une petite recherche et tu trouveras ton bonheur ...

J'ai pensé à cette méthode qui devrait certainement marcher en effet.
Mais l'objectif est ici de pouvoir évaluer du code provenant d'un serveur via AJAX par exemple, ou saisi par un utilisateur.

Exemple, lors d'un appel AJAX, le serveur m'envoie du HTML contenant également quelques scripts Javascripts, le but est d'exécuter tous ces scripts.

getElementsByTagName fonctionne pour ça sur tous les browsers, mais pas sur IE, il y a peut être quelque chose de différent à faire pour ce browser...

**RomainVALERI** · 22/08/2011, 12h18

Envoyé par bluelambda

getElementsByTagName fonctionne pour ça sur tous les browsers, mais pas sur IE, il y a peut être quelque chose de différent à faire pour ce browser...

Je n'en ai pas retrouvé la mention expresse dans leur doc, mais IE ou pas IE, il me semble que getElementsByTagName et createElement attendent en principe un nom de balise en forme "canonique" (en maj)

J'ai cherché dans la ref DOM du w3c mais pour le moment je n'ai que ça

Envoyé par w3c

From the DOM point of view, The biggest difference between HTML 4.01 (and earlier) and XHTML 1.0 is that XHTML is case sensitive, whereas HTML 4.01 is case insensitive. The HTML case insensitivity is also reflected in the DOM HTML API. For instance, element and attribute names are exposed as all uppercase (for consistency) when used on an HTML document, regardless of the character case used in the markup. Since XHTML is based on XML, in XHTML everything is case sensitive, and element and attribute names must be lowercase in the markup.

Si quelqu'un a plus d'infos, vous gênez pas, ça fait longtemps que ce sujet m'intrigue sans que j'aie eu le temps de m'y pencher plus en détail pour l'instant ^^

**bluelambda** · 22/08/2011, 13h58

J'ai trouvé un exemple qui fonctionne, il ne me reste plus qu'à comprendre pourquoi

je verrai ça ce soir.
Il charge en AJAX un fichier HTML contenant également du Javascript, et je vois bien l'effet sous IE 7.

Voir ICI

Le code HTML (contenant du Javascript) téléchargé à la volée en AJAX

**Willpower** · 22/08/2011, 13h59

Envoyé par bluelambda

J'ai pensé à cette méthode qui devrait certainement marcher en effet.
Mais l'objectif est ici de pouvoir évaluer du code provenant d'un serveur via AJAX par exemple, ou saisi par un utilisateur.

Exemple, lors d'un appel AJAX, le serveur m'envoie du HTML contenant également quelques scripts Javascripts, le but est d'exécuter tous ces scripts.

getElementsByTagName fonctionne pour ça sur tous les browsers, mais pas sur IE, il y a peut être quelque chose de différent à faire pour ce browser...

Raison de plus, si tu comptes éxécuté du code provenant d'un script, il suffit d'ajouter le script à la page dynamiquement et tu ne devras plus t'ennuyer avec ni AJAX ni EVAL.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var script = document.createElement('script');
script.src = "http://www.tonsite.com/";
document.getElementsByTagName('head')[0].apprendChild(script);

pour du code reçu brut (par exemple par un input utilisateur) tu peux soit utiliser eval directement sans passer par un script ( = 1 ligne de code) sinon reprendre les 3 lignes plus haut en remplacant "script.src = ... " par "script.text = 'mon_code_a_exec';".

**Willpower** · 22/08/2011, 14h20

après avoir testé ton code (car ça me semblait étrange que IE refuse)

effectivement sans doctype ça fonctionne partout sauf sous IE qui refuse les balises html (donc <script>) dans innerHTML et avec doctype ça fonctionne, oh magie !

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
	<script type="text/javascript" >
	window.onload = function(){
			var element = document.createElement('div');
			element.innerHTML = "<script type='text/javascript'>alert('Test');</s"+"cript>";
 
			document.body.appendChild(element);
 
			var scripts = element.getElementsByTagName("script");
 
			for(var i=0; i<scripts.length; i++)
			{
				if (window.execScript){
					window.execScript(scripts[i].text.replace('<!--',''));
				}
				else{
					window.eval(scripts[i].text);
				}
			}
	};
	</script>
	</head>
	<body>zd</body>
 
 
 
 
</html>

**bluelambda** · 22/08/2011, 18h38

Envoyé par Willpower

après avoir testé ton code (car ça me semblait étrange que IE refuse)

effectivement sans doctype ça fonctionne partout sauf sous IE qui refuse les balises html (donc <script>) dans innerHTML et avec doctype ça fonctionne, oh magie !

Je n'ai pas pu tester sur IE7 mais sur IE8 ton exemple ne fonctionne pas... je n'ai pas la popup qui apparait.
Sous quel IE l'as-tu testé?

**Willpower** · 22/08/2011, 18h51

Envoyé par bluelambda

Je n'ai pas pu tester sur IE7 mais sur IE8 ton exemple ne fonctionne pas... je n'ai pas la popup qui apparait.
Sous quel IE l'as-tu testé?

9

**SpaceFrog** · 23/08/2011, 11h26

Je ne vois pas en qui la méthode dom ne te permettrait pas de coller le texte du script dans la balise créée ?

**bluelambda** · 23/08/2011, 14h03

Envoyé par SpaceFrog

Je ne vois pas en qui la méthode dom ne te permettrait pas de coller le texte du script dans la balise créée ?

La méthode DOM est très bien mais ne s'applique pas à ce que je veux faire.
Le texte que je reçoit provient d'un serveur, et est issu d'un appel AJAX, il peut contenir n'importe quel code HTML entrecoupé de scripts Javascripts.
Je dois inclure ce texte dans ma page et exécuter tous les scripts qu'il contient.
Pour récupérer le texte des scripts, j'utilise getElementsByTagName (qui ne fonctionnait pas dans mon exemple).

J'ai résolu mon problème hier soir, j'updaterai ce topic rapidement pour dire ce que j'ai fait.

**SpaceFrog** · 23/08/2011, 18h25

Je n'y vois toujours aucune contrindication ...
Il te suffit de parser le code html js reçu pour en recupérer le "texte" du script et l'insérer à la volé dans une balise script créée par le DOM ...

**bluelambda** · 02/09/2011, 17h53

OK.
Mais j'ai réussi à corriger mon erreur avec les liens vers l'exemple que j'ai postés plus haut.
Merci

Evaluer du Javascript à la volée

JavaScript

Discussions similaires

Partager

Partager