Inserer des <script></script> par innerHTML ??

Inserer des <script></script> par innerHTML ?? - HTML/CSS - Programmation

Marsh Posté le 16-06-2006 à 13:54:46    

Salut,
 
Je voudrais rafraichir le contenu d'un div par ajax et innerHTML.
 
Le code de la page que je récupère par ajax est de la forme  
 

Code :
  1. <script type="text/javascript">
  2. function highlight(){...}
  3. </script>
  4. <style type="text/css">...</style>
  5. <div class="case" onClick="highlight();"><div>


 
C'est sale, les <script> ne sont pas dans le head mais en même temps je n'y ai pas accès ... Cela fonctionne dans une autre page du site affichant directement ce contenu. Par contre ça ne fonctionne pas quand j'ajoute ce code html par innerHTML.
 
Enfait l'html est bien reconnu, comme le css mais par contre les fonctions définit dans les balise script ne sont pas prises en compte.
 
Dans firefox (et l'extention webdevelopper) je regarde le contenu de la page html généré après l'appel ajax et je vois que la partie script a disparue. Le css reste, la suite du html aussi mais la partie script saute lors de l'insertion par innerHTML;  
 
Est-ce un problème connu ? Y'a-t-il une parade ?  


---------------
"L'informatique n'est pas plus la science des ordinateurs que l'astronomie n'est celle des télescopes." Michael R. Fellows & Ian Parberry
Reply

Marsh Posté le 16-06-2006 à 13:54:46   

Reply

Marsh Posté le 16-06-2006 à 14:26:52    

Autrement dit  
 

Code :
  1. <html>
  2. <body>
  3. <div id="toto">
  5. <script type="text/javascript">function test(){ alert('test');}</script>
  7. <a href="#" onClick="test();" > Ajout </a>
  9. </div>
  10. </body>
  11. <html>


fonctionne mais pas  
 

Code :
  1. <html>
  2. <body>
  5. <a href="#" onClick="document.getElementById('toto').innerHTML = '<script type=\'text/javascript\'>function test(){ alert(\'test\');}</script> <a href=\'#\' onClick=\'test();\' > Ajout </a> ';return false;">Click ICI</a>
  7. <div id=toto ></div>
  9. </body>
  10. <html>


---------------
"L'informatique n'est pas plus la science des ordinateurs que l'astronomie n'est celle des télescopes." Michael R. Fellows & Ian Parberry
Reply

Marsh Posté le 16-06-2006 à 14:41:41    

Bah c'est logique quand même. [:spamafote]

Reply

Marsh Posté le 16-06-2006 à 15:40:17    

Et y'a un moyen de fair ce que je veux faire ?? Charger à la volée de nouvelles fonction javascript ?


---------------
"L'informatique n'est pas plus la science des ordinateurs que l'astronomie n'est celle des télescopes." Michael R. Fellows & Ian Parberry
Reply

Marsh Posté le 16-06-2006 à 16:00:58    

via la commande "eval" peut etre : http://www.laltruiste.com/document [...] _eval.html

Reply

Marsh Posté le 16-06-2006 à 16:22:06    

J'ai tenté ça mais ça fonctionne pas  
 

Code :
  1. <html>
  2. <body>
  5. <a href="#" onClick="eval('function testR(){ alert(\'test\');}');document.getElementById('toto').innerHTML = '<a href=\'#\' onClick=\'testR();\' > Ajout </a> ';return false;">Click ICI</a>
  7. <div id=toto ></div>
  9. </body>
  10. <html>


---------------
"L'informatique n'est pas plus la science des ordinateurs que l'astronomie n'est celle des télescopes." Michael R. Fellows & Ian Parberry
Reply

Marsh Posté le 16-06-2006 à 16:28:37    

Code :
  1. <html>
  2.       <body>
  4.       <a href="#"
  5.            onClick="document.getElementById('toto').innerHTML = '<a href=\'#\' onClick=\'testR();\' > Ajout </a> <script>function testR(){ alert(\'test\');}</script> ' ">Click ICI</a>
  7.       <div id="toto" ></div>
  9.       </body>
  10.       <html>

Reply

Marsh Posté le 16-06-2006 à 21:32:57    

Moi aussi j'ai tenté des milliers de fois, toujours rien ..


---------------
Photos Panoramiques Montagnes Haute Savoie
Reply

Marsh Posté le 16-06-2006 à 21:37:18    

function addScript(src) {
  var header = document.getElementsByTagName("head" )[0];
  var newScript = document.createElement("script" );
  newScript.type="text/javascript";
  newScript.src=src;
  header.appendChild("script" );
}
 
codé en live ici, ça marche après tests
genre :  
alert("tata" ); ca fonctionne
mais tout ce qui est déclaration de fonction c'est DTC bien profond sous Firefox :/
dommage ça aurait pu être cool.
 
Go to google  :sweat:

Message cité 1 fois
Message édité par gatsu35 le 16-06-2006 à 21:54:06
Reply

Marsh Posté le 16-06-2006 à 22:45:57    

gatsu35 a écrit :

header.appendChild("script" );

La console JS ne reconnait pas appendChild peut-être faut-il déclarer un document XHTML ésotérique ?
Rajouter un élement child à la balise head ça c'est XML compliant ..  :sarcastic:

Message cité 1 fois

---------------
Photos Panoramiques Montagnes Haute Savoie
Reply

Marsh Posté le 16-06-2006 à 22:45:57   

Reply

Marsh Posté le 16-06-2006 à 22:50:47    

après plusieurs tests et une lecture sur cette page  
 
http://www.ibilab.net/webdev/artic [...] ipt-13.htm
 
j'ai ainsi créé et nettoyé un peu les deux fonctions suivantes qui fonctionnent assez bien mais... :  

Code :
  1. function include(fichier){
  2.  // Si notre variable globale (rattachee a  l'objet window)  
  3.  // n'existe pas, on la cree.
  4.  if(window.includeFiles == undefined)  {
  5.   window.includeFiles = new Array();
  6.   }
  7.  try {
  8.   var script = document.createElement("script" );
  9.   script.type = "text/javascript";
  10.   script.src  = fichier;
  11.   document.getElementsByTagName("head" )[0].appendChild(script);
  12.   window.includeFiles.push(fichier);
  13.  }
  14.  catch(e) {
  15.   document.write('$lt;script type="text/javascript" src="' + fichier + '"><\/script>');
  16.   window.includeFiles.push(fichier);
  17.  }
  18. }
  20. function include_once(fichier) {
  21.  if(window.includeFiles == undefined) {
  22.   window.includeFiles = new Array();
  23.  } else {
  24.   var nbr = window.includeFiles.length
  25.   for(var i=0; i < nbr; i++) {
  26.   if(window.includeFiles[i] == fichier)
  27.    return false;
  28.   }
  29.  }
  30.  include(fichier);
  31.  return true;
  32. }


 
j'ai alors créé une fonction go() qui chargeait un fichier test.js puis elle appelle une fonction testjs() qui est déclaré dans ce fichier javascript.
 
le fichier test.js :

Code :
  1. alert("tata" );
  2. function testjs() {alert("toto" );}


 
la fonction go()

Code :
  1. function go() {
  2.   include_once("test.js" );
  3.  testjs();
  4. }


résultats lors de l'appel de la fonction go via un input :  
 
Internet explorer :  
1ere fois : "tata", puis "toto".....2eme fois : "toto".
FireFox :
1ere fois : "tata", puis Erreur JS.....2eme fois : "toto".
Opera :
1ere fois : rien, puis "toto"....2eme fois : "toto".
 
conclusion :  
sous IE, le fichier JS est interprété et les déclaration de fonction le sont immédiatement
sous FF, le fichier JS est interprété mais les déclarations de fonction sont faites après un temps de latence j'ai l'impression. J'ai testé en lancant setTimeout("testjs()",20), et ca marchait sous firefox (en gros 20 millisecondes avec l'include du JS je lance testjs().
et sous Opera, ben le fichier JS n'est pas interprété mais les functions déclarées sont bien intégrées.

Reply

Marsh Posté le 16-06-2006 à 22:52:49    

grosbin a écrit :

La console JS ne reconnait pas appendChild peut-être faut-il déclarer un document XHTML ésotérique ?
Rajouter un élement child à la balise head ça c'est XML compliant ..  :sarcastic:


 
c'est pas la console JS qui doit reconnaitre appendChild [:petrus75]
appendChild c'est une méthode inhérente à n'importe quel élément du DOM de ta page.[:petrus75]
 
si tu testais bien et jetais un coup d'oeil au DOM Inspector sous FF tu verrait que cette méthode est bel et bien présente.


Message édité par gatsu35 le 16-06-2006 à 22:53:10
Reply

Marsh Posté le 16-06-2006 à 22:54:54    

appendChild -> is not a function  ;)  
Le genre de dév cross-navigateur qui me rappelle de sacrées nuits-blanches
Bravo à toi  :jap:

Message cité 2 fois

---------------
Photos Panoramiques Montagnes Haute Savoie
Reply

Marsh Posté le 16-06-2006 à 23:31:50    

grosbin a écrit :

appendChild -> is not a function  ;)  
Le genre de dév cross-navigateur qui me rappelle de sacrées nuits-blanches
Bravo à toi  :jap:


Ben c'est mon boulot [:spamafote] et puis j'aime passer des nuits blanches a faire du bordel de tests crossbrowsers à la fois pour le JS (DOM scripting), et les CSS.
 
Bon pour l'instant chez moi je fais pleins de tests sur IE, FF1.5 et Opera
et SAFARI dans le cadre du boulot...
 
Même si j'aimerai bien avoir 1 PC supplémentaire avec linux dessus pour konqueror et un mac mini pour tester safari et IE5 mac (meme si celui ci est voué à la poubelle)

Message cité 1 fois
Reply

Marsh Posté le 17-06-2006 à 08:26:11    

gatsu35 a écrit :

Ben c'est mon boulot [:spamafote] et puis j'aime passer des nuits blanches a faire du bordel de tests crossbrowsers à la fois pour le JS (DOM scripting), et les CSS.

Bon courage vieux  :jap:  
Me rappelle que j'ai passé 2 semaine sur un truc similaire


---------------
Photos Panoramiques Montagnes Haute Savoie
Reply

Marsh Posté le 17-06-2006 à 09:58:29    

grosbin a écrit :

appendChild -> is not a function  ;)


T'es sur quel navigateur pour que ça donne ça ? IE3 ? [:johneh]

Reply

Marsh Posté le 17-06-2006 à 15:23:03    

Firefox
 

Code :
  1. function addScript(src) {
  2.   var header = document.getElementsByTagName("head" );
  3.   var newScript = document.createElement("script" );
  4.   newScript.type="text/javascript";
  5.   newScript.src=src;
  6.   header.appendChild("script" );
  7. }

Message cité 1 fois

---------------
Photos Panoramiques Montagnes Haute Savoie
Reply

Marsh Posté le 11-08-2006 à 10:29:33    

grosbin a écrit :


Code :
  1. function addScript(src) {
  2.   var header = document.getElementsByTagName("head" );
  3.   var newScript = document.createElement("script" );
  4.   newScript.type="text/javascript";
  5.   newScript.src=src;
  6.   header.appendChild("script" );
  7. }



 
il manque un element dans cette fonction! en effet le header est un tableau !!! donc
 

Code :
  1. function addScript(src) {
  2.   var header = document.getElementsByTagName("head" );
  3.   var newScript = document.createElement("script" );
  4.   newScript.type="text/javascript";
  5.   newScript.src=src;
  6.   header[0].appendChild("script" );
  7. }


 
ça marche sur firefox (plus de "appendChild is not a function" a s'en arracher les cheveux !), sur ie et opera !

Reply

Marsh Posté le 09-02-2011 à 00:17:52    

Je remonte le post car j'ai un problème similaire et je ne parviens à le résoudre malgré toutes ces réponses.  
 
J'affiche une requête SQL en tableau dans une div popup via un innerHTML.
Je construis en parallèle un tableau JS pour permettre une recherche dans la liste sans refaire de requête.
Mon bazar fonctionne bien tant que ma construction JS n'est pas dans le innerHTML (forcément... d'où ce message).
 
Pour l'ajax en JS, j'ai donc cet innerHTML :

Code :
  1. document.getElementById('PopUp').innerHTML = xhr.responseText;


 
dans ma popup PHP la construction JS :

Code :
  1. // Ecriture Javascript du tableau des prenom,nom et userid
  2. echo '<script type="text/javascript">';
  3. conv_tabjs($PrenomShrdFrds, 'js_prenomShared', $prempass=true);
  4. conv_tabjs($NomShrdFrds, 'js_nomShared', $prempass=true);
  5. conv_tabjs($IdShrdFrds, 'js_useridShared', $prempass=true);
  6. echo '</script>';


 
conv_tabJS est une fonction de conversion. Le tout fonctionne hors innerHTML, mais pas à l'intérieur. Firebug affiche tout le code, mais le script ne semble pas fonctionner.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed