Ins�rer du code Javascript avec innerHTML.

Version imprimable

06/12/2011, 15h45
defacta

Ins�rer du code Javascript avec innerHTML.
Salut,

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

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:

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:

Citation:

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.
06/12/2011, 16h03
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,
06/12/2011, 16h15
SpaceFrog

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 ...:roll:

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

Citation:

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:

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:

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:

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.

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

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
<!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.

06/12/2011, 18h26
defacta

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

Code:

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

Et �a marche avec IE(7 � 9) et tous les autre :)
06/12/2011, 19h00
Bovino

Citation:

Envoy� par defacta

Et �a marche avec IE(7 � 9) et tous les autre :)

:no:

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.
06/12/2011, 22h00
defacta

Citation:

Envoy� par Bovino

:no:

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() :(
06/12/2011, 22h23
Willpower
Citation:

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:

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:

<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)
06/12/2011, 22h36
SpaceFrog

Citation:

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.
06/12/2011, 22h59
Willpower

Citation:

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:

window.parent.document.getElementById('azdz').onclick = maFonction;
07/12/2011, 07h56
defacta

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:

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
11/12/2011, 14h26
Willpower

Citation:

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:

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").
12/12/2011, 08h48
SpaceFrog

Citation:

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" :D