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.

**defacta** · 06/12/2011, 22h00

Envoy� par Bovino

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.

Ben il me faut pouvoir dynamiquement ajouter du code JavaScript dans un window.parent.
Ce code Javascript est g�n�r� en PHP, donc je ne peux pas ins�rer un .js

Donc pour l'instant j'ai fait �a pour tester l'insertion dynamique de Javascript en javascript:
http://boxfly.free.fr/tmp/innerjs.html

Bon, �a marche avec tous les navigateurs et IE9 je l'ai vu fonctionn� mais maintenant il ne veut plus faire l'alert()

**Willpower** · 06/12/2011, 22h23

Envoy� par defacta

Ben il me faut pouvoir dynamiquement ajouter du code JavaScript dans un window.parent.
Ce code Javascript est g�n�r� en PHP, donc je ne peux pas ins�rer un .js

Donc pour l'instant j'ai fait �a pour tester l'insertion dynamique de Javascript en javascript:
http://boxfly.free.fr/tmp/innerjs.html

Bon, �a marche avec tous les navigateurs et IE9 je l'ai vu fonctionn� mais maintenant il ne veut plus faire l'alert()

Non mais c'est ta conception qui est mauvaise, tu ne dois pas d�clarer ton javascript dans le document de mani�re �parse, mais bien tout d�clarer dans le head par exemple.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
var ele = document.createElement("script");
ele.type = 'text/javascript';
ele.text = document.getElementById("DIV_js").innerHTML ;
document.head.appendChild(ele);

ensuite tu fais :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<p onClick="hello();">Cliquer pour alert()</p>

�tant donn� que tu d�finis ta fonction "hello" dynamiquement (enfin, en th�orie, quand tu le feras � partir de ton iframe, pour l'instant elle est d�finie � un moment obscure lors de la cr�ation de la page) il est normal que cette ligne n'attache aucune fonction � l��v�nement onclick de ta balise <p>. (puisque la fonction hello n'existe probablement pas encore lorsque tu essayes de la rattacher. )

edit: enfin (document.getElementById("DIV_js"))[0] getElementById renvoit un objet et non une collection d'objet, la question est alors comment se fait-il que ton code fonctionne sur les autres navigateurs ? (� mon avis insertBefore recevant un �l�ment ne lui appartenant pas (undefined) insert le nouvel objet en premier child par d�faut sur la plupart des navigateurs)

**SpaceFrog** · 06/12/2011, 22h36

Ben il me faut pouvoir dynamiquement ajouter du code JavaScript dans un window.parent.

C'est une erreur de conception !
Si le but est d'injecter du js dans une page qui ne t'appartient pas tu te heurtera � la SOP.
Sinon le js devra �tre sur la page avant.

**Willpower** · 06/12/2011, 22h59

Envoy� par SpaceFrog

C'est une erreur de conception !
Si le but est d'injecter du js dans une page qui ne t'appartient pas tu te heurtera � la SOP.
Sinon le js devra �tre sur la page avant.

Je pense qu'il essaye de faire du pseudo ajax en se servant d'une iframe.

C'est vrai que lorsqu'on d�bute, c'est plus simple de cr�er 2 page html, plut�t que de n'en cr�er qu'une seule avec des modifications du dom suite � des requ�tes ajax.

Donc on peut bien concevoir qu'il utilise du javascript re�u dans sa page "enfant" pour la page parente. Mais la pratique "d'envoyer" du code d'une page � l'autre est discutable, une bonne pratique serait simplement de "l'utiliser".

S'il veut ajouter un �v�nement onclick sur la page "parente" :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

window.parent.document.getElementById('azdz').onclick = maFonction;

**defacta** · 07/12/2011, 07h56

Je dis simplement que cet exemple:
http://boxfly.free.fr/tmp/innerjs.html
marche avec TOUS les navigateurs mais pas avec IE et bizarrement IE l'a fait fonctionn� mais qu'une seule fois !
Apr�s c'est pas une question d'Ajax, d'iframe ou autre...

Et puis il ne faut pas �tre anti-iframe, c'est beaucoup utilis�, m�me par les sites r�put�s modernes comme twitter:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

U.innerHTML='<iframe tabindex="-1" role="presentation" style="position:absolute;top:-9999px;" src="'+R+'"></iframe>'

Edit: Cette fois �a marche avec eval, j'ai mis � jour le fichier:
http://boxfly.free.fr/tmp/innerjs.html

**Willpower** · 11/12/2011, 14h26

Envoy� par defacta

Et puis il ne faut pas �tre anti-iframe, c'est beaucoup utilis�, m�me par les sites r�put�s modernes comme twitter:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

U.innerHTML='<iframe tabindex="-1" role="presentation" style="position:absolute;top:-9999px;" src="'+R+'"></iframe>'

l�, laisse-moi ne pas �tre d'accord.

Oui, une bonne partie des sites connus utilises des iframes, mais pas en tant que tel. Ils les utilisent quasi uniquement pour palier � des probl�mes, un peu comme des hacks.

Les 2 cas le plus courant sont :

- poster un formulaire dynamiquement sans raffraichir la page lorsque l'ajax ne le permet pas. (ex: les input de type "file" ou bien pour le cross-domain.)

- g�rer l'historique pour un site ajax.

Ils sont parfois aussi utilis� pour exporter une vid�o (plut�t que d'utiliser les balises objets, � mon avis pour g�rer la compatibilit�) ou une pubs (pour prot�ger le code gra�e aux interdictions d'acc�s des page "cross-domain").

**SpaceFrog** · 12/12/2011, 08h48

m�me par les sites r�put�s modernes comme twitter:

Passe le code de twitter au validateur w3c et redis moi que c'est un site "moderne"

Ins�rer du code Javascript avec innerHTML.

JavaScript

Discussions similaires

Partager

Partager