Discussion :

[gouroulubrik]

Bonjour,

Nouveau membre sur le forum mais adepte des faqs de ce site depuis longtemps, je me permets de m'inscrire et de poster sur le sujet bouillant qu'est AJAX en ce moment.

Depuis le debut de la semaine, je fais un site en AJAX pour le boulot. L'utilisation d'AJAX est plus une lubie personnelle qu'une réel nécéssité, et m'a provoqué des maux de tête considérables, en particulier a cause à cause d'un "bug" d'innerHTML que l'ont rencontre aussi bien sous IE 6 que sous Firefox 1.504 : Le javascript contenu dans l'innerHTML remplacé n'est pas exécuté. et Eval ne corrige pas ce problème car les fonction évaluées ne sont pas pour autant disponibles pour le reste de la page. J'ai désesperement essayé des choses inefficaces ou totalement complexes et farfelues (coté serveur) avant de me dire qu'il devait y avoir un moyen d'y remédier en javascript.

j'ai trouvé ce topic qui proposait une solution qui me paraissait surdimensionnée. j'ai donc essayé d'écrire la mienne, mais je n'ai à ma disposition que IE6 firefox et opera 8.54. Ce dernier ne réagissant pas bien à ma fonction, en effet, suivant ce que je fais : soit opera n'execute pas le script, soit il l'execute 2 fois, soit il l'execute ... sans en copier le contenu !

les commentaires, bug, corrections, optimisations et autres sont les bienvenues.

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
 
function innerHTMLJS(obj,content)
{
  /* Copyleft by GourouLubrik 2006 */
  if(typeof(obj) != 'object' && typeof(content) != 'string') return;
  obj.innerHTML = content;
 
  var scripts = obj.getElementsByTagName('script');
  if(scripts == false) return true; // no node script == no problem !
  for (var i=0;i<scripts.length;i++)
  {
    var scriptclone = document.createElement('script');
    if(scripts[i].attributes.length > 0) /* boucle de copie des attributs du script dans le nouveau node */
    {
      for (var j in scripts[i].attributes)
      {
        if(typeof(scripts[i].attributes[j]) != 'undefined'
         && typeof(scripts[i].attributes[j].nodeName) != 'undefined' /* IE needs it */
         && scripts[i].attributes[j].nodeValue != null
         && scripts[i].attributes[j].nodeValue != '' /* IE needs it ou il copie des nodes vides */) 
        {
          scriptclone.setAttribute(scripts[i].attributes[j].nodeName,scripts[i].attributes[j].nodeValue);
        }
      }
    }
    scriptclone.text = scripts[i].text; // on copie le corp du script
     /* 
         la j'ai pas compris, si je ne return pas sous opera ici : le javascript s'execute 2 fois - 
         mais la : le script s'execute mais n'est pas a ce moment la placé entre les balises scripts !
         et si je return juste après le innerHTML, le script n'est pas executé... ---o(<    
     */
    if (navigator.userAgent.indexOf("Opera")>0) { return; }
    /* on force le remplacement du node par dom, qui a pour effet de forcer le parsing du javascript */
    scripts[i].parentNode.replaceChild(scriptclone,scripts[i]); 
  }
  return true;
}

A propos d'ajax, pour tous les adeptes de PHP je conseille très vivement le script disponible sur http://www.hemmady.com/ajaxagent
je ne mets pas le reste de mon contenu php/js car il se base sur cette librairie.
Elle est absolument géniale, et la découverte de JSON est un bonheur pour convertir les objets PHP en javascript.
PS: Ne pas oublier de str_replace("\"","\\\"") vos contenus JSON sous peine de plantage instantané de votre navigateur =).

[FremyCompany]

Pourquoi ne pas utiliser eval ???

Code :

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

1
2
3
4
5
6
if (scriptbalise.src==null || scriptbalise.src=="" || (!scriptbalise.src)) {
   eval(scriptbalise.innerHTML);
}
else {
   eval(FonctionAJAXQuiRetourneLeContenuDuFichierJs(scriptbalise.src));
}

[gouroulubrik]

Bien sur, j'avais pensé a eval, mais après quelques test en situation, je me suis aperçu que les fonctions evaluées ne sont par la suite plus disponibles dans le reste de la page.

Ces fonctions étaient utilisées dans des evenements genre onblur(); et alors que l'eval avait parfaitement fonctionné, mon evenement onblur me disait que la fonction était alors indéfinie...

cela n'est pas toujours le cas car le script suivant fonctionne très bien :

Code :

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

1
2
3
4
5
6
7
<html><head/>
<body>
<script type="text/javascript">
  eval('function toto() { alert("toto"); } toto();');
</script>
<input type="button" value="toto()" onclick="toto();"/>
</body></html>

je serais curieux de savoir a partir de quel moment la fonction parsée est mémorisée ou non. =/

[FremyCompany]

Fonction valide dans eval uniquement (selon le nav) : function Name() {}
Fonction valide définitivement : Name = function () {}
ex dans une balise script :

Code :

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

1
2
3
4
<script [...]>
MsgBox = function (text) {alert(text);};
MsgBox("Hello");
</script>

ex dans un eval;

Code :

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

1
2
eval("MsgBox = function (text) {alert(text);};\n
MsgBox(\"Hello\");");

[gouroulubrik]

très interessant (et très bizarre aussi) cette différence =)
je testouillerais ça lundi au boulot, parce que les heures sup' c'est mal =)

[gouroulubrik]

Finalement, j'ai pas attendu jusqu'a demain, et ce petit changement de définition de fonction a fait des miracles !

Moult mercis, dommage, elle me plaisait bien ma fonction au dessus ^^.

[FremyCompany]

De rien.
Un détail juste...
Si ton script comence par <!-- en HTML, ca va bloquer le eval...
Solution proposée (non testée):

Code :

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

s.innerHTML.replace(new RegExp(".*[^\\\"][^'][^/].*<!--", "gi"),"")

[NioX5199]

Bonjour j'ai un problème similaire que je n'arrive pas a régler et je n'ai pas bien compris quelle était la solution proposé ici. Au final faudrait faire quoi pour que du script inséré dans une page via innerHTML soit évalué ? Merci A++

PS: j'ai déja essayé de récupéré tout les script de la réponse ajax et ensuite ds une boucle els évaluer un par un en faisant eval() mais ca ne fonctionne pas

A++

[FremyCompany]

Code :

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

function k() {}

doit devenir

Code :

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

k = function() {}