Niveau
..........
En rapport...

Introduction

Admetons que vous disposiez d'une DIV (qui a pour id : 'md') et que son contenu soit changé par une fonction javascript. ex :

javascript
document.getElementById('md').innerHTML="coucou";

Ce javascript va ecrire “coucou” dans votre DIV.
Si maintenant, vous voulez mettre du javascript dans votre DIV vous allez faire :

javascript
document.getElementById('md').innerHTML='<SCRIPT type="text/javascript">alert("coucou");</SCRIPT>';

Mais cela ne marchera pas. L'alert n'aura jamais lieu. Tout simplement parce-que le code que vous passez dans le innerHTML n'est pas interprété.

Raisonnement

Il faudrais donc extraire le code javascript et l'éxécuter. Mais un simple eval ne pourrais pas fonctionner car le innerHTML ne contient pas que du javascript.
Il faut donc :

  1. Remplir le div avec innerHTML
  2. Extraire le code javascript (compris dans les balises <SCRIPT> </SCRIPT>)
  3. Evaluer le code que l'on vient d'extraire.

Fonction

La fonction ci-dessous va extraire ce qui se trouve entre <SCRIPT> </SCRIPT> et l'interpréter :

javascript
function execJS(node) {
var bSaf = (navigator.userAgent.indexOf('Safari') != -1);
var bOpera = (navigator.userAgent.indexOf('Opera') != -1);
var bMoz = (navigator.appName == 'Netscape');
  var st = node.getElementsByTagName('SCRIPT');
  var strExec;
  for(var i=0;i<st.length; i++) {     
    if (bSaf) {
      strExec = st[i].innerHTML;
    }
    else if (bOpera) {
      strExec = st[i].text;
    }
    else if (bMoz) {
      strExec = st[i].textContent;
    }
    else {
      strExec = st[i].text;
    }
    try {
      eval(strExec);
    } catch(e) {
      alert(e);
    }
  }
}
Certaines rêgles DOIVENT être réspectées tout de même :

  1. Toujours ecrire SCRIPT. Les majuscules sont etentielles.
  2. Ne pas utiliser / / pour les commentaires mais /* et */. Pour eval, votre code est sur une seule ligne (les retours à la ligne sont ignorés) et donc si vous utliser / /, tous ce qui suit sera en commentaire.
  3. Toujours terminer vos lignes par un ; et ceci pour les même raisons que précedement.



N'oubliez pas non plus que les fonctions déclarées dans le code que vous évaluez n'existe que dans le scope créé par eval. A la fin de l'évaluation vos fonctions disparaissent de la mémoire.

Utilisation

Pour utliser cette fonction il suffit de faire :

javascript
document.getElementById('md').innerHTML='<SCRIPT type="text/javascript">alert("coucou");</SCRIPT>';
execJS(document.getElementById('md'));

Exemple

cliquez sur le lien ci-dessous pour changer mon contenu et afficher une alert.
Changer L'exemple ci-dessous change le contenu de la DIV et affiche sa nouvelle valeur dans un alert.

Source

Cette fonction est extraite d'un article sur AHAH : http://microformats.org/wiki/rest/ahah


iDo –

03/01/2006 10:18