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