Balise <script> dans InnerHtml

Version imprimable

Voir 40 message(s) de cette discussion en une page

14/06/2011, 01h06
dragonno

Je résume pour tenter de comprendre :
Une fonction vérifie que ton formulaire est bien rempli et quand cela est assuré elle doit lancer un script partenaire qui se sert de certains champs du formulaire.

Je ne vois pas quel est le problème pour que ta fonction de vérification lance une fonction javascrit.
14/06/2011, 08h22
ingeniomatique

Elle ne lance pas une "fonction" javascript mais un second script ;) donc un script dans un script et cela pose problème.
Le cas échéant, si tu as une solution, merci de me fournir un exemple de code.
Bonne semaine à tous,
Antoine
14/06/2011, 10h33
bewidia

Tu peux utiliser une iframe vide cachée qui chargera une page html contenant le script une fois que la validation du formulaire est effectuée (j'imagine qu'il faut que tu copies les données du formulaire dans ta page d'iframe avant que script s'execute. Mais c'est un peu moche quand même.

Ou alors lorsque tu valides ton formulaire, tu charges une page html ne contenant que le script dans un DIV ou autre via par exemple jQuery, je ne sais plus si du JS contenu dans une page ainsi chargée est exécuté.

Pour informations, un exemple (testé sur IE8 uniquement) de ce qu'on peut faire si et seulement si le script externe ne contient pas document.write().

Script JS Externe

Code:

1
2
3
4
5
6
7
8
9
 
// Affiche dans l'élément HTML id="partenaire" un texte à partir de la variable globale "_name"
(function(){
	var elt=document.getElementById('partenaire');
	if(elt){
		while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
		elt.appendChild(document.createTextNode('Salut '+_name));
	}
})();

Page XHTML

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Test</title>
		<script type="text/javascript">//<![CDATA[
                        // Initialisation de la variable globale requise par le script externe
                        var _name=null;
 
                        function traitement(){
                                //      Affecte la valeur provenant du formulaire à la variable globale
                                _name=document.getElementById('nom').value;
                                if(_name=='')return false; // Retour si le nom n'est pas défini
 
                                // Insère le script JS externe dans l'élément HTML id="partenaire" pour éxecution immediate
                                var tag=document.createElement('script');
                                tag.setAttribute('type','text/javascript');
                                tag.setAttribute('src','partenaire.js');
                                tag.setAttribute('async','true');
 
                                var elt=document.getElementById('partenaire');
                                elt.appendChild(tag);
                                return false;
                        }
                        
                        window.onload=function(){
                                var elt=document.getElementById('formulaire');
                                elt.onsubmit=traitement;
                        }
                        //]]>
                </script>
	</head>
	<body>
		<form action="#" method="get" id="formulaire">
			<p>
				<label for="nom">Nom :</label>
				<input type="text" id="nom" name="nom" value="" />
				<input type="submit" value="Envoyer" />
			</p>
		</form>
		<div id="partenaire">Ce texte sera remplacé par le code du script chargé dynamiquement</div>
	</body>
</html>

Bonjour Eric2a,

Je viens de tester ton script.

Page test2.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(function(){
	var elt=document.getElementById('majeur');
	if(elt){
		while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
var advst_coreg_redir_url =_advst_coreg_redir_url;
var advst_coreg_redir_txt =_advst_coreg_redir_txt;
var clickCoreg =_clickCoreg;
var advst_coreg_bordure =_advst_coreg_bordure;
var advst_coreg_separateur =_advst_coreg_separateur;
var advst_coreg_texte =_advst_coreg_texte;
var advst_coreg_fond =_advst_coreg_fond;
var advst_coreg_email =_advst_coreg_email;
var advst_coreg_nom =_advst_coreg_nom;
var advst_coreg_prenom =_advst_coreg_prenom;
var advst_coreg_sexe =_advst_coreg_sexe;
var advst_coreg_jour =_advst_coreg_jour;
var advst_coreg_mois =_advst_coreg_mois;
var advst_coreg_annee =_advst_coreg_annee;
		elt.appendChild(document.createTextNode('Salut '));
	}
})();

Head page principale :

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
29
function maj()
{
var mail = document.formulaire.mail.value;var mail2 = document.formulaire.mail2.value;var jour = document.formulaire.jour.value;var mois = document.formulaire.mois.value;var annee = document.formulaire.annee.value;var nomp = document.formulaire.nomp.value;var prenom = document.formulaire.prenom.value;
if(mail!='' && mail2!='' && mail==mail2 && nomp!='' && prenom!='')
{
_advst_coreg_redir_url = ""; // url de destination du programme (facultatif)
_advst_coreg_redir_txt = "Suivant >>";
_clickCoreg = function (nb_sel, nb_unsel) { if (nb_unsel == 0) { window["validerCoreg"] = function () { document.location.href = "register2.php" } }};
_advst_coreg_bordure = "#FFFFCC";
_advst_coreg_separateur = "#CCCCCC";
_advst_coreg_texte = "#000000";
_advst_coreg_fond = "#FFFFCC";
_advst_coreg_email = "test@siteweb.com"; // Email
_advst_coreg_nom = "boutier"; // Nom
_advst_coreg_prenom = "antoine"; // Prénom
_advst_coreg_sexe = "H"; // Sexe (H, F)
_advst_coreg_jour = "24"; // Jour de naissance
_advst_coreg_mois = "11"; // Mois de naissance
_advst_coreg_annee = "1987"; // Année de naissance
 
				var tag=document.createElement('script');
				tag.setAttribute('type','text/javascript');
				tag.setAttribute('src','test2.js');
				tag.setAttribute('async','true');
 
				var elt=document.getElementById('majeur');
				elt.appendChild(tag);
				return false;
}}

Mon DIV :

Code:

<script src="http://d.siteexterne.com/co.php?zoneid=20607"></script>

Malheureusement, lors de la vérification, ça affiche bien "Salut" mais le script ne s'affiche toujours pas !!!!! Les variables ne sont pas reconnues...........

Si vous avez une autre idée...... ou si je me plante..... merci par avance !

14/06/2011, 21h29
ingeniomatique

Par ailleurs la technique de mon partenaire me dit que selon eux "la seule solution serait de passer par une iframe mais que ce serait très difficile". Comment faudrait-il faire concrètement ?

Merci encore à tous.
15/06/2011, 09h01
bewidia

Citation:

Envoyé par ingeniomatique

Par ailleurs la technique de mon partenaire me dit que selon eux "la seule solution serait de passer par une iframe mais que ce serait très difficile". Comment faudrait-il faire concrètement ?

Merci encore à tous.

Cf ma réponse ci dessus ?
15/06/2011, 11h01
ingeniomatique

Oui j'ai vu ta réponse ci-dessus mais je n'ai pas très bien compris...
1- Comment faire pour que la page d'iframe ne se charge pas à l'ouverture de ma page d'inscription mais seulement quand je souhaite ?
2- Comment faire pour que le script contenu dans l'iframe reconnaisse les valeurs du formulaire AVANT de se charger, en les récupérant ?

Merci encore..

1 : tu crées une balise iframe avec un nom de fenetre, tu lui mets les dimensions qui vont bien et tu lui appliques un style display:none, tu ne charges aucune page dedans

2 : lorsque ton formulaire est valide, tu le soumets en direction du nom de ton iframe avec comme nom d'action une page contenant un formulaire reprenant les valeurs soumises (tu affiches l'iframe en changeant el display, évidemment)
Ton script JS sera en fin de page et sera donc executé avec les valeurs copiées

ex :
ta page mère
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <form action="page2.html" target="monIframe"> <input type="submit" value="test" /> </form> <iframe name="monIframe" width="400" height="400"> </iframe> </body> </html>
ta page fille
Code:

1 2 3 4 5 6 7 8 9 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <script type="text/javascript">alert('ok')</script> </body> </html>

15/06/2011, 12h51
ingeniomatique

C'est une solution effectivement bidouillée mais qui peut marcher !! Surtout que j'ai tout compris.

Je bloque cependant là : " lorsque ton formulaire est valide, tu le soumets en direction du nom de ton iframe avec comme nom d'action une page contenant un formulaire reprenant les valeurs soumises "

Mon DIV d'origine contenait donc un IFRAME vide (sans SRC).

Comment le modifier pour juste AJOUTER le SRC sans toucher au reste ?
Et comment faire pour que le iframe récupère les valeurs du formulaire ?
Pouvez-vous me montrer cette partie de code afin de m'aiguiller ?

Merci beaucoup.
15/06/2011, 15h33
bewidia

Tu as essayé l'exemple que j'ai donné ?

L'iframe de la page mère n'a pas de source, le formulaire se soumet en direction de l'iframe donc tu n'as pas besoin de "modifier l'iframe". La page qui se charge dans l'iframe est l'action de ton formulaire ... elle récupère donc les données que ton formulaire envoie ... à toi de les réutiliser en fonction de la technologie dont tu disposes.
15/06/2011, 15h35
ingeniomatique

Oui j'ai vu ton exemple après coup.

Néanmoins, ça ne peut pas aller avec moi ; car l'iframe doit afficher le script non pas lorsque je valide le formulaire mais AVANT (avec un onChange) lorsqu'un champ du formulaire change. Je reste bloqué.

Encore merci.
15/06/2011, 16h02
bewidia

Ben, comme tu travailles en frame, tu peux soumettre ton formulaire à chaque changement d'élément dans le formulaire, la page mère ne bougera pas. Ton script dans la page fille sera chargé à chaque fois avec les paramètres que tu fournis
16/06/2011, 15h37
sekaijin

la encore ça me semble très clair

tu insère un script dynamiquement et tu parle d'affichage

tu fais quoi ??
tu veux ajouter un script pour qu’il soit exécuté ?
Ou tu veux ajouter le texte d'un script pour que l'utilisateur le voit ?

dan les deux cas je ne comprends pas l'utilité du innerHtml
mais bon si tu veux faire afficher le texte du script
tu fais un replace de < par < et > par > et tu colle ton texte dans un div
et c'est fini
pas d \ " ou quoi que ce soit.

ensuite je ne comprends pas la logique.
tu dit que ton script dépends du formulaire mais tu l'affiche avant le submit
comment fais-tu la mise à jour de ton script en fonction des données de formulaire ?

bref j'ai l'impression que tout est mélangé le code source du serveur (pourquoi nous montre tu du php ?) le code html de ta page le contenu du script qui dois faire quoi
ça m'a l'air d'être un gros foutoir.

je crois qu'avant de bricoler un truc pareil il te faut penser à ce que tu veux obtenir définir qui doit faire quoi et à quel moment.

je vois mal comment un script d'un partenaire invoqué sur une url src peut être modifié par des données d'un formulaire si on ne passe pas ces données dans l'url.

donc à part ajouter la balise script dynamiquement et ne pas maîtriser ce qu'elle fait je ne vois pas ce que tu peux faire avec.

de façon plus générale chez moi un "partenaire" qui fait un injection dans mes page se fait bouler dès le premier pas. soit il me propose un dialogue d'échange propre et maîtrisable soit il garde ces cliques et il n'est pas partenaire.

Je ne compte pas le nombre de prestataire qui nous on fait des merdouille de document.write et autre c@nerie du genre. au final nous avons écrit un js propre asynchrone qui fait la même chose de façon propre.

je pense entre autre au compteur de page qui te font un truc genre

Code:

document.write('<img src="') var url="url.du/partenaire"; document.write(url);...

là ou une simple balise généré par le serveur PHP suffisait.
mieux en utilisant un iframe 1px à la place de img le chargement est asynchrone et ne bloque pas le travail de l'utilisateur le temps que le compteur de page réponde son pixel.

A+JYT
19/06/2011, 12h22
ingeniomatique

Merci pour tous vos conseils éclairés. Je ne m'en suis pas sorti malgré tout cela... :( mais cela me servira sûrement pour la suite.
Bon dimanche à tous.

Voir 40 message(s) de cette discussion en une page