[JavaScript] [FAQ] Pourquoi mon script JS ajouté à ma page avec innerHTML ne marche-t-il pas ?

[FremyCompany]

http://www.developpez.net/forums/sho...9&postcount=18

Cela devient urgent d'ajouter ca à la faq, car AJAX est de plus en plus répendu et on en parle pas assez de ce problème d'AJAX que sont les scripts dynamiquement ajoutés...

[ov700]

Bonsoir

en effet, cet entrée dans la faq me semble capitale ... j'ai mis du temps à comprendre et quand j'ai trouvé la réponse dans ce forum ... miracle.


Je souhaiterais apporter ma contribution à ce problème en complétant cette fonction setInnerHTML(), car elle a pour moi 2 défauts :
1) les fonctions amenées par le/les sections <script> ne sont pas disponibles: l'exécution du code est faite mais essayez d'appeler une fonction de cette section et vous aurez droit à un échec (unknow object/function/var)
2) pour le script avec attribut src, il est fait appel à Ajax pour le charger ... cela me semble inutile

Voici donc le code que je propose de modifier ainsi

Code :

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
38
39
40
41
42
 
/*
* @param pDivObject - Object qui possède la méthode .innerHTML
* @param pHTML - le code HTML a rajouter dans l'object pDivObject
*/
function setInnerHTML(pDivObject, pHTML) 
{
  // mise du contenu HTML dans pDivObject
  pDivObject.innerHTML=pHTML; 
  var All=pDivObject.getElementsByTagName("*");
  for (var i=0; i<All.length; i++) 
  {
    All[i].id=All[i].getAttribute("id");
    All[i].name=All[i].getAttribute("name");
    All[i].className=All[i].getAttribute("class");
  }
  var AllScripts=pDivObject.getElementsByTagName("script");
  // parcours du tableau à l'envers pour n'être pas perturbé par l'effet du removeChild 
  for (var i=AllScripts.length-1; i>=0; i--)
  {
    var s = AllScripts[i];
    var oScript = document.createElement("script");
    oScript.type='text/javascript';
 
    if (s.src && s.src!="") 
    {
      oScript.src = s.src;
    } else 
    {
      oScript.innerHTML = s.innerHTML;
    }
    // rajoute dans le body du document pere ce qui assure son execution
    // et la disponibilité des fonctions ainsi ajoutées
    // de plus, cela evite un appel Ajax dans le cas ou s.src est spécifié 
    document.body.appendChild(oScript);
 
    // retrait du script dans l'objet cible 
    // Attention : cela a un effet immédiat sur le contenu de la variable AllScripts (modifications indexes et contenus)
    // voila pourquoi le tableau des scripts est parcouru à l'envers
    pDivObject.removeChild(s);
  }
}

[FremyCompany]

En effet on peut aussi faire comme ca.
Pour ce qui est des fonctions, j'avais prévenu
Fallait écrire maFunc = function() {} au lieu de function maFunc() {}

Note que j'ai une version de ce script qui fait aussi fonctionner les balises STYLE, mais elle nécésite mon framework JS perso, une version amélioré de Prototype...

Le post le concernant est ICI, mais je dois encore le mettre à jour et publier la dernière version : http://www.developpez.net/forums/sho...d.php?t=239420

[sekaijin]

pourquoi ne pas simplement utiliser les methodes du dom
document.createElement et non innerHTML

Code :

1
2
monscript = document.createElement('sript');
document.scripts.appendChilds(monscript);

c'est simple et ça marche sur tous les navigateurs (même les téléphone mobile et autre trucs embarqués)

Un seul détail ce n'est utile que pour lier un script externe car pour un script enbarqué un eval est suffisant

Lisez la doc du DOM c'est bien plus efficasse que le innerHTML
A+JYT

[FremyCompany]

Envoyé par sekaijin

pourquoi ne pas simplement utiliser les methodes du dom
document.createElement et non innerHTML

Code :

c'est simple et ça marche sur tous les navigateurs (même les téléphone mobile et autre trucs embarqués)

Un seul détail ce n'est utile que pour lier un script externe car pour un script enbarqué un eval est suffisant

Lisez la doc du DOM c'est bien plus efficasse que le innerHTML
A+JYT

Bien, très bonne idée... bon, attends, tu vas me convertir ca en DOM (les ... sont remplacés par un contenu différent pour chaque ligne et chaque colonne du tableau, le script lui aussi a été remplacé par ... mais diffèrent à chaque fois selon les besoins :

Code HTML :

1
2
3
4
5
6
7
<div id="contentDiv_1" class="contentDiv">
   <script><!--
      ...
   --!></script>
   <a href="javascript:linkAction(this, event)">Cliquez sur ce lien pour générer à nouveau le tableau</a>
   <table><tbody><tr><td>...</td><td>...</td><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td><td>...</td><td>...</td></tr></tbody></table>
</div>

[FremyCompany]

De plus document.scripts n'a pas de méthode appendChild

[sekaijin]

Envoyé par FremyCompany

Bien, très bonne idée... bon, attends, tu vas me convertir ca en DOM (les ... sont remplacés par un contenu différent pour chaque ligne et chaque colonne du tableau, le script lui aussi a été remplacé par ... mais diffèrent à chaque fois selon les besoins :

Code HTML :

tu te fais quelques fonctions genre ça
http://www.developpez.net/forums/sho...0&postcount=17

Code :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
var myTag = document.getExtendedElementById('atag'); //celui ou tu fais le inner
var contentDiv     = myTag.createDiv({'class':'contentDiv', id:'contentDiv_1'});
var ascript           = contentDiv.createScript();
ascript.createTextElement('<!--
      ...
   --!>');
var href   = myTag.createAHref('javascript:linkAction(this, event)', 'Cliquez sur ce lien pour générer à nouveau le tableau');
var table  = myTag.createTable();
var tbody = table.createTBody();
var tr       = tbody.createTr();
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
 
var tr       = tbody.createTr();
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
 
var tr       = tbody.createTr();
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
 
var tr       = tbody.createTr();
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
 
var tr       = tbody.createTr();
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
 
var tr       = tbody.createTr();
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
 
var tr       = tbody.createTr();
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
 
var tr       = tbody.createTr();
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
 
var tr       = tbody.createTr();
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
 
var tr       = tbody.createTr();
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');
var td       = td.createTd();
td.createTextElement('...');

et si tu te fais des fonctions moins générique ton code se réduit à des boucles et quelques createElements

A+JYT