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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Inserer des <script></script> par innerHTML ??

Ricco

Retour au pays

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 :

<script type="text/javascript">
function highlight(){...}
</script>
<style type="text/css">...</style>
<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

Publicité

Ricco

Retour au pays

Autrement dit

Code :

<html>
<body>
<div id="toto">
<script type="text/javascript">function test(){ alert('test');}</script>
<a href="#" onClick="test();" > Ajout </a>
</div>
</body>
<html>

fonctionne mais pas

Code :

<html>
<body>
<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>
<div id=toto ></div>
</body>
<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

Hermes le Messager

Breton Quiétiste

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

Ricco

Retour au pays

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

nemohp

Adepte du provisoire permanent

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

Ricco

Retour au pays

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

Code :

<html>
<body>
<a href="#" onClick="eval('function testR(){ alert(\'test\');}');document.getElementById('toto').innerHTML = '<a href=\'#\' onClick=\'testR();\' > Ajout </a> ';return false;">Click ICI</a>
<div id=toto ></div>
</body>
<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

nemohp

Adepte du provisoire permanent

Code :

<html>
<body>
<a href="#"
onClick="document.getElementById('toto').innerHTML = '<a href=\'#\' onClick=\'testR();\' > Ajout </a> <script>function testR(){ alert(\'test\');}</script> ' ">Click ICI</a>
<div id="toto" ></div>
</body>
<html>

grosbin

OR die;

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

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

gatsu35

Blablaté par Harko

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

grosbin

OR die;

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

Publicité

gatsu35

Blablaté par Harko

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 :

function include(fichier){
// Si notre variable globale (rattachee a l'objet window)
// n'existe pas, on la cree.
if(window.includeFiles == undefined) {
window.includeFiles = new Array();
}
try {
var script = document.createElement("script" );
script.type = "text/javascript";
script.src = fichier;
document.getElementsByTagName("head" )[0].appendChild(script);
window.includeFiles.push(fichier);
}
catch(e) {
document.write('$lt;script type="text/javascript" src="' + fichier + '"><\/script>');
window.includeFiles.push(fichier);
}
}
function include_once(fichier) {
if(window.includeFiles == undefined) {
window.includeFiles = new Array();
} else {
var nbr = window.includeFiles.length
for(var i=0; i < nbr; i++) {
if(window.includeFiles[i] == fichier)
return false;
}
}
include(fichier);
return true;
}

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 :

alert("tata" );
function testjs() {alert("toto" );}

la fonction go()

Code :

function go() {
include_once("test.js" );
testjs();
}

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.

gatsu35

Blablaté par Harko

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.

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

grosbin

OR die;

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

gatsu35

Blablaté par Harko

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

grosbin

OR die;

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

FlorentG

Unité de Masse

grosbin a écrit :

appendChild -> is not a function

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

grosbin

OR die;

Firefox

Code :

function addScript(src) {
var header = document.getElementsByTagName("head" );
var newScript = document.createElement("script" );
newScript.type="text/javascript";
newScript.src=src;
header.appendChild("script" );
}

Message cité 1 fois

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

guigui457

grosbin a écrit :

Code :

function addScript(src) {
var header = document.getElementsByTagName("head" );
var newScript = document.createElement("script" );
newScript.type="text/javascript";
newScript.src=src;
header.appendChild("script" );
}

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

Code :

function addScript(src) {
var header = document.getElementsByTagName("head" );
var newScript = document.createElement("script" );
newScript.type="text/javascript";
newScript.src=src;
header[0].appendChild("script" );
}

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

renaudgarns

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 :

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

dans ma popup PHP la construction JS :

Code :

// Ecriture Javascript du tableau des prenom,nom et userid
echo '<script type="text/javascript">';
conv_tabjs($PrenomShrdFrds, 'js_prenomShared', $prempass=true);
conv_tabjs($NomShrdFrds, 'js_nomShared', $prempass=true);
conv_tabjs($IdShrdFrds, 'js_useridShared', $prempass=true);
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.

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Script Réseau en VBscript et démarrage de Windows	[URGENT]Insérer des champs dans un texte/occurence d'un style
formulaire HTML sans script CGI	[VBA-Excel] [Resolu] Insérer et supprimer des feuilles
Execution d'un script à distance : linux -> winXP	Problème avec le script prog SquirrelMail...
[apache] arret de mon script cgi!!!	executer script sous python
Petit script VB pour receuillir des informations sur des PC en réseau	Inserer label dans un UserForm
Plus de sujets relatifs à : Inserer des <script></script> par innerHTML ??

Page générée en 0.083 secondes