[DOM] comment insérer du code dynamiquement

Version imprimable

salut !!

j'aimerais insérer du code dynamiquement dans mon site web, aidée de javascript :P 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.:mrgreen:
Code:

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 8O

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

a+++,
Camille

23/04/2008, 19h27
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 :aie:

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.
24/04/2008, 09h49
Camille01

Citation:

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

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
24/04/2008, 11h01
Auteur

Chez moi ça ne marche ni avec l'un ni avec l'autre :aie:
Montre moi ton script.

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

Citation:

Envoyé par Auteur

Chez moi ça ne marche ni avec l'un ni avec l'autre :aie:
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:

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

Salut,

Essaie voir avec ceci:

Code:

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

24/04/2008, 12h47
Auteur
Citation:

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:

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 ;)
24/04/2008, 18h49
Camille01
Citation:
Envoyé par Auteur

ah ton script fonctionne car tu utilises eval :)
Ton script revient à ceci en fait :

Code:

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é" :aie:
24/04/2008, 20h05
marcha

Salut,

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

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

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

Code:

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>

25/04/2008, 15h03
Camille01

Citation:

Envoyé par marcha

Salut,

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

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

merci, ton alternative marche bien ! :yaisse2:

bonne journée !