[DOM] comment insérer du code dynamiquement

**Camille01** · 23/04/2008, 18h13

salut !!

j'aimerais insérer du code dynamiquement dans mon site web, aidée de javascript

En l'occurrence c'est un element SCRIPT.

Ca marche très bien avec Frirefox, mais mal avec Internet explorer..
Voici le code qui ne marche pas, et que j'ai énormement simplifié. Il est donc totalement absurde.

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
 
<html>
	<head>
		<SCRIPT type="text/javascript">
			window.onload = function() {
				var elem = document.getElementById("kala");
				var code = "<SCRIPT id='nouveau' >coucou les amis</ SCRIPT>";
				elem.innerHTML = code;
				var e = document.getElementById("nouveau");
				alert(e);
			}
		</SCRIPT>
 
	</head>
	<body>
		<div id="kala"></div>
	</body>
</html>

Avec internet explorer, le programme affiche 'null', alors qu'il est censé récupérer l'élément nouvellement inséré par l'assignation de .innerHTML.

Une petite remarque! si j'ajoute un morceau de code qui définis un élément DIV au lieu d'un élément SCRIPT, ca a l'air de marcher.

Mon but ici (incomprehensible dans ce code simplifié!), est de charger une page avec ajax. Mais étant donné que quand on charge une page ajax et qu'on l'integre dynamiquement avec innerHTML dans la page courante, les elements scripts ne s'executent pas. J'essaye donc, une fois la page ajax chargée, récupérer son element de script, et l'évaluer avec une fonction "eval". Je precise bien que ma solution marche avec Firefox, mais pas avec Internet explorer..

voila voila

Bon, si quelqu'un entrevois une once se piste qui puisse me donner la moindre idée, n'hésitez po

a+++,
Camille

**Auteur** · 23/04/2008, 19h27

bonjour,

Une balise script doit contenir du code javascript. IE n'apprécie pas "coucou les amis" (même si le message est très aimable) car ce n'est pas du code JS

Quant à Firefox, s'il affiche le message c'est qu'il doit supprimer les balises script. Regarde dans l'arborescence de ta page dans l'inspecteur DOM : Outils->Inspecteur DOM.

**Camille01** · 24/04/2008, 09h49

Envoyé par Auteur

bonjour,

Une balise script doit contenir du code javascript. IE n'apprécie pas "coucou les amis" (même si le message est très aimable) car ce n'est pas du code JS

Quant à Firefox, s'il affiche le message c'est qu'il doit supprimer les balises script. Regarde dans l'arborescence de ta page dans l'inspecteur DOM : Outils->Inspecteur DOM.

ah eum oui effectivement pour le "coucou les amis"..

Mais ca marche pas non plus avec du code javascript, du vrais

.. Il ne peux juste pas récupérer l'élément, qu'il aie du vrais code javascript à l'intérieur ou non avec Internet explorer.

Avec Firefox ca marche sans problème

**Auteur** · 24/04/2008, 11h01

Chez moi ça ne marche ni avec l'un ni avec l'autre

Montre moi ton script.

Sinon tu peux définir dynamiquement les fonctions qui seront appelées lors d'un événement.

**Camille01** · 24/04/2008, 12h08

Envoyé par Auteur

Chez moi ça ne marche ni avec l'un ni avec l'autre

Montre moi ton script.

Sinon tu peux définir dynamiquement les fonctions qui seront appelées lors d'un événement.

merci pour tes réponses !
je t'envoie une version du code qui correspond un peu plus a ce que je veux faire :

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
<html>
	<head>
		<SCRIPT type="text/javascript">
			window.onload = function() {
				var elem = document.getElementById("kala");
				var code = "<SCRIPT type='text/javascript' id='nouveau' >alert('bonjour')\</SCRIPT\>";
				elem.innerHTML = code;
				var e = document.getElementById("nouveau");
				alert(e);
				eval(e.innerHTML);
 
		</SCRIPT>
 
	</head>
	<body>
		<div id="kala"></div>
	</body>
</html>

Lorsque la page se charge, l'object récupéré devrais d'abord être affiché ([Object] dans Firefox, et malheureusement 'null' dans IE).
Puie ensuite, le code javascript s'execute par la fonction eval(), dans firefox, ca affiche "coucou", dans IE, ca plante car l'objet est null.

Je dois éviter de créer le code javascript dynamiquement, car les données dans ce code sont générée dynamiquement par le script CGI dans le fichier ajax, et c'est un module ajax utilisé par d'autres pages. Enfin ce que j'écris ne dois pas être clair, mais j'évite ceci a cause de mon architecture..

**marcha** · 24/04/2008, 12h18

Salut,

Essaie voir avec ceci:

Code :

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

1
2
3
4
5
6
7
8
 
 function loadScript(src) {
   var head = document.getElementsByTagName("head")[0];
   script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = src;
   head.appendChild(script);
 }

**Auteur** · 24/04/2008, 12h47

Envoyé par Camille01

Lorsque la page se charge, l'object récupéré devrais d'abord être affiché ([Object] dans Firefox, et malheureusement 'null' dans IE).
Puie ensuite, le code javascript s'execute par la fonction eval(), dans firefox, ca affiche "coucou", dans IE, ca plante car l'objet est null.

ah ton script fonctionne car tu utilises eval

Ton script revient à ceci en fait :

Code javascript :

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

1
2
3
4
5
6
7
 
  <script type="text/javascript">
		window.onload = function() {
				var code = "alert('bonjour')";
				eval(code);
        }
  </script>

Sans eval, ton code ne marche pas, le script n'est pas exécuté lors de son insertion dans la balise div

**Camille01** · 24/04/2008, 18h49

Envoyé par Auteur

ah ton script fonctionne car tu utilises eval

Ton script revient à ceci en fait :

Code javascript :

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

1
2
3
4
5
6
7
 
  <script type="text/javascript">
		window.onload = function() {
				var code = "alert('bonjour')";
				eval(code);
        }
  </script>

Sans eval, ton code ne marche pas, le script n'est pas exécuté lors de son insertion dans la balise div

oui exact, seulement que le morceau de code qui se trouve dans eval, doit provenir d'un fichier HTML contenant le code d'initialisation. Ce fichier HTML est chargé la mode d'ajax, et inséré dans la page courante. Seulement ce fichier html qu'on charge contient du javascript qu'il faut aussi executer. Pour faire ceci, j'essaye de récupérer l'élément "SCRIPT" par son ID, puis évaluer son innerHTML avec eval.

Donc mon principal problème, après avoir fait "div.innerHTML = codeHtmlChargé", est de récupérer un élément étant a l'intérieur de "codeHtmlChargé"

**marcha** · 24/04/2008, 20h05

Salut,

Regarde comment c'est fait dans la librairie prototype dans le code source

http://www.prototypejs.org/api/string/evalScripts

**Auteur** · 24/04/2008, 20h19

tu as l'objet Function() à ne pas confondre avec function qui te permet de créer des fonctions dynamiquement :

Code javascript :

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
 
  <script type="text/javascript">
    // définition de la 1ere fonction
    var code1 = "alert('coucou');";     // son code JS
    var fct1 = new Function("",code1);  // création de l'objet fct1
 
    // défintition de la seconde fonction
    var code2 = "alert(var1+'\\n'+var2);";  // son code JS avec deux variables : var1 et var2
    var fct2 = new Function("var1, var2", code2); // création de l'objet fct2 avec ses paramètres var1 et var2
 
    var txt21 = "Ceci est le texte à afficher dans le second alert"; //texte à afficher
    var txt22 = "Ceci est la suite du texte...";    // suite du texte
 
    window.onload=function()
    {
        fct1();   // appel de fct1 (sans paramètre)
        fct2(txt21, txt22); //appel de fct2 et transmission de ses paramètres
 
    }
  </script>