Insérer du code Javascript avec innerHTML.

**defacta** · 06/12/2011, 15h45

Salut,

J'ai une div qui contient des éléments mais aussi du Javascript:

Code :

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

1
2
3
4
5
6
7
8
<div id="DIV_page">
<script>
function JS_showDetails() {
 //Intérieur de la fonction...
}
</script>
<div>Le contenu....qui contient des tableaux et des div</div>
</div>

Alors si j'affiche directement ce code, ça marche. Par contre, si je l'insére à partir d'un innerHTML comme ceci:

Code :

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

  WP.get('DIV_page').innerHTML = get('DIV_page').innerHTML ;

WP pour window.parent et get pour getElementById

Pour pouvoir le mettre dans la page principale à partir d'une iframe, le code javascript n'est pas exécuté et je me retrouve avec des:

Erreur*: JS_showDetails is not defined

J'ai regardé et apparemment un innerHTML ne va pas permettre d’insérer du Javascript, ce n'est vraiment que du texte.

Comment je peux faire ?

merci,
Vincent.

**Torgar** · 06/12/2011, 16h03

Bonjour,

C'est normal, les script JS ne sont pas évalués lorsqu'ils sont insérés via innerHTML.

Regarde dans la FAQ, un sujet traite ce genre de problème.

Cordialement,

**SpaceFrog** · 06/12/2011, 16h15

C'est de toute façon un erreur de conception à la base.
Tout le js nécessaire à la page devrait etre présent au chargment.

Mais depuis l'evolution d'ajax on voit de plsu en plus ce genre de choses ...

avec jQuery il est possible d'aller chercher un script sur le serveur sous forme de texte et de l'intégrer à la page .

**defacta** · 06/12/2011, 16h24

Envoyé par Torgar

Bonjour,

C'est normal, les script JS ne sont pas évalués lorsqu'ils sont insérés via innerHTML.

Regarde dans la FAQ, un sujet traite ce genre de problème.

Cordialement,

J'ai essayé avec eval comme ceci:

Code :

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

1
2
3
4
5
6
  var div = WP.get('DIV_page');  
  div.innerHTML = get('DIV_page').innerHTML ;
  var x = div.getElementsByTagName("script");   
  for (var i=0;i<x.length;i++) {  
      eval(x[i].text);  
  }

Alors si j'ajoute une alert dans ma div:

Code :

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

1
2
3
4
5
6
7
8
9
<div id="DIV_page">
<script>
alert('Voilà alert') ;
function JS_showDetails() {
 //Intérieur de la fonction...
}
</script>
<div>Le contenu....qui contient des tableaux et des div</div>
</div>

Alors l'alert() va bien être éxécutée 2 fois, la première lorsqu'elle est chargée dans l'<iframe, la seconde lorsqu'elle est mise dans DIV_page de window.parent.
Par contre, cela ne marche d'avec Firefox (ni chrome ni IE) et de toute façon je reste avec l'erreur:

Code :

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

Erreur*: JS_showDetails is not defined

J'ai pas très bien compris la FAQ que tu m'as donné en lien. C'est pour de l'Ajax, non ?
Je n'utilise pas Ajax.

merci,
Vincent.

**defacta** · 06/12/2011, 17h27

J'ai cherché un peu plus en profondeur et j'ai ceci qui marche:

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
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test page: Using Javascript to Insert Javascript</title>
</head>
<body>
 
<p>this page tests generating js code. If you see a alert box, then it means it works. (view source code)</p>
 
<div id="DIV_js" style="display:none;">
var i = 'ici' ;
function hello() {
  alert('toto dit '  + i) ;
}
</div>
<script>
var ele = document.createElement("script");
ele.type = 'text/javascript';
ele.innerHTML= document.getElementById("DIV_js").innerHTML ;
 
document.body.insertBefore(ele, (document.getElementById("DIV_js"))[0]);
 
</script>
 
<p onClick="hello();">Back toAsynchronous Javascript; Using Javascript to Insert Javascript</p>
</body>
</html>

Ca marche avec Firefox, Safari, chrome, Opera mais ça ne marche pas avec IE(7 à 9) j'ai l'erreur:
SCRIPT5009: « hello » est indéfini

Vous savez pourquoi ?

merci,
Vincent.

**defacta** · 06/12/2011, 18h26

C'est bon, IE n'aime pas ele.innerHTML il préfère le .text:

Code :

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

ele.text = document.getElementById("DIV_js").innerHTML ;

Et ça marche avec IE(7 à 9) et tous les autre

**Bovino** · 06/12/2011, 19h00

Envoyé par defacta

Et ça marche avec IE(7 à 9) et tous les autre

Ca ne marche pas parce que ton code est correct (imagine bien que le innerHTML d'un script, ça n'a pas beaucoup de sens...) mais parce que tu appelles une fonction déjà définie dans le document...

Que cherches-tu à faire au juste ?
Ceci dit, je pense que tu devrais essayer d'apprendre un peu les bases de JavaScript avant de l'utiliser, notamment la notion de portée du code dans le document.

Insérer du code Javascript avec innerHTML.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager