SELFHTML actuel Articles spécialisés JavaScript| SELFHTML actuel Articles spécialisés JavaScript |
 |
Stefan Puff: |
|
|
 | |
| Adresse électronique: |
 puff@mnd-umwelttechnik.fh-wiesbaden.de
|
Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!
 |
Le problème a déjà été présenté par Hatto von Hatzfeld dans 
Passation de valeurs JavaScript entre différents documents HTML. C'est pourquoi je vais me concentrer sur deux solutions différentes qui, si elles sont toutes deux basées sur JavaScript, empruntent deux chemins différents pour la passation de valeurs.
| |
Le premier utilise le biais d'une structure de cadres, dans laquelle les documents distincts sont chargés. Pour la passation sont employées des variables qui ont été définies dans le fichier qui contient le jeu de cadres.
<html> <head> <title>Passation de valeurs par le biais d'une structure de cadres</title> <script language="JavaScript" type="text/javascript"> <!-- var valeur1; var valeur2; //--> </script> </head> <frameset rows="80%,*"> <frame name="frame1" src="page1.htm"> <frame name="frame2" src="egal.htm"> </frameset> |
Toutes les variables sont définies dans le jeu de cadres, dans notre exemple valeur1 et valeur2, dans les quelles, plus tard, des données doivent être transmises.
Ces variables peuvent alors être lues à partir des pages. Comment ces variables sont adressées, nous y reviendrons plus tard.
La page egal.htm est en fait une page factice, qui peut figurer pour n'importe quelle autre.
La page qui transmet les valeurs et qui est d'abord chargée dans frame1 pourrait par exemple ressembler à ceci:
<html>
<head>
<title>Page 1</title>
<script language="JavaScript" type="text/javascript">
<!--
function passation()
{
parent.valeur1 = document.formulaire.champ1.value;
parent.valeur2 = document.formulaire.champ2.value;
location.href = "page2.htm";
return true;
}
//-->
</script>
</head>
<body>
<form name="formulaire">
<p>
Comment vous appelez vous?<br>
Prénom <input type="Text" name="champ1" value="" size="25" maxlength="25"><br>
Nom <input type="Text" name="champ2" value="" size="25" maxlength="25"><br>
<input type="button" value="envoi" onClick="passation();">
</p>
</form>
</body>
</html>
|
Mentionnons d'abord que le formulaire de cette page est là purement et simplement comme masque de saisie. Il est naturellement également possible de transmettre ces valeurs d'une autre façon. Mais revenons à l'exemple.
Admettons que l'utilisateur entre dans le champ prénom (formulaire.champ1) "Stefan" et dans le champ nom (formulaire.champ2) "Münz";
alors, en validant avec le bouton "envoi", la fonction passation() est appelée. Celle-ci écrit alors les contenus de champ1 et champ2 dans les variables parent.valeur1 ou respectivement parent.valeur2. Les variables qui servent à la passation de valeurs et qui ont été définies dans le fichier du jeu de cadres sont adressées par l'élément parent (de le même façon que, par exemple, parent.frames[0].name est le nom du premièr cadre du cadre mère).
Ensuite, la page suivante est appelée grâce à location.href. Celle-ci pourrait être construite de la sorte:
<html> <head> <title>Page 2</title> </head> <body> <p> Vous vous appelez: <script>document.write(parent.valeur1 + " " + parent.valeur2)</script> </p> </body> </html> |
La deuxième page lit les valeurs dans les variables de l'élément parent à l'aide de parent.valeur1 ou parent.valeur2 et les écrit dans le document.
Dans cet exemple, le document contiendrait le texte "Vous vous appelez Stefan Münz".
Il est bien entendu également possible de traiter ces valeurs comme d'habitude.
Le gros avantage de cette méthode est qu'elle evite le codage préliminaire et le décodage qui s'ensuit et qu'elle permet de travailler comme avec des variables ordinaires.
| |
Cette solution est déjà un peu plus vaste mais fonctionne par contre sans cadres.
L'idée en est d'accrocher tout simplement les valeurs à transmettre à l'URL de la page à laquelle elles sont destinées, un peu comme lorsqu'on se sert de formulaires pour la transmission.
Les données sont accrochées codées à l'URL après un point d'interrogation. Il faut noter ici que la chaîne de caractères accrochée ne doit pas contenir de signes non permis.
La page destinatrice lit l'URL par location.search, en extrait les valeurs et les décode à nouveau.
Un grand inconvénient de cette variante réside dans le fait que les pages, même si elles se trouvent déjà dans le cache, doivent être à nouveau chargées et qu'elle ne fonctionne pas hors connexion dans la plupart des navigateurs.
Comment coder les données est maintenant laissé à la discrétion de chacun. Dans la solution proposée ci-après, je me suis tout simplement servi d'un formulaire, étant donné qu'ainsi, on n'a pas à se torturer l'esprit pour le codage. Si maintenant la page ne devait pas contenir de formulaire, on peut utiliser tout simplement des champs de formulaires cachés dans lesquels JavaScript écrirait les valeurs. C'est en tous cas plus simple et plus rapide que de programmer soi-même un codage.
Étant donné que le document source ne contient qu'un formulaire normal, la réalisation ne devrait présenter aucun problème; je l'ai mentionné malgré tout pour être complet.
<html> <head> <title>Saisie</title> </head> <body> <form action="sortie.html" method="GET" target="_self"> <p> Comment vous appelez vous?<br> prénom <input type="Text" name="champ1" value="" size="25" maxlength="25"><br> nom <input type="Text" name="champ2" value="" size="25" maxlength="25"><br> <input type="submit" value="envoi"> </p> </form> </body> </html> |
Les données doivant maintenant être lues et décodées dans le document cible. Pour ce faire, la fonction decode() est utilisée dans l'exemple de sortie ci-après
<html>
<head>
<title>Page 2</title>
<script language="javascript" type="text/javascript">
<!--
var formulaire = new Array(0);
decode();
/* cette fonction décode les mentions dans le chemin */
function decode()
{
var url = window.location.search;
if (url != "")
{
url = url.substring(1,url.length); //Les données sont extraites
// de l'Url et séparées en
liste = url.split("&"); // paires de valeurs au &
for (i=0;i<=liste.length-1;i++)
{
temp = liste[i].split("="); // Le champ et les données de chaque
formulaire.splice(formulaire.length,2,temp[0],temp[1]); // paire sont dissociées
}
for (i=0;i<=formulaire.length-1;i++)
{
formulaire[i] = formulaire[i].replace(/\+/g," ");
// remplacement du + par un espace
formulaire[i] = unescape(formulaire[i]); // reconstituer les séquences escape
}
}
}
//-->
</script>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" width="90%" align="center">
<tr>
<td colspan="2" align="center"><big><b>sortie<b></big></td>
</tr>
<tr>
<td width="50%"><b>nom du champ</b></td>
<td><b>entrée</b></td>
</tr>
<script>
<!--
for (var i=0;i<formulaire.length;i++)
{
document.write("<tr><td>" + formulaire[i] + "</td>");
document.write("<td><tt>" + formulaire[++i] + "</tt></td></tr>");
}
//-->
</script>
</table>
</body>
</html>
|
Dans la fonction decode() les données du formulaire sont d'abord extraites de l'URL. Ensuite les couples de données constituées du nom de champ et des mentions d'abord sont séparés l'un après l'autre suivis de chaque paire de valeurs.
Suit alors le décodage proprement dit. Pour plus de précisions à ce sujet vous pouvez consulter la page SELFHTML sur les 
exemples pour l'échange alterné entre HTML et CGI.
Le résultat du décodage se trouve maintenant dans l'array (liste) formulaire pour un usage ultérieur. Les éléments pairs de cette liste, à savoir formulaire[0], formulaire[2], formulaire[4] etc. contiennent les noms de champ auxquels l'utilisateur a affecté des mentions. Les éléments impairs à savoir formulaire[1], formulaire[3], formulaire[5] contiennent les mentions respectives de ces champs que l'utilisateur a soit entrées, soit choisies. Si aucune valeur n'a été transmise, par exemple si la page a été appelée directement, l' Array formulaire reste vide.
La partie dans le corps de fichier génère ni plus ni moins qu'un tableau dans lequel les données sont restituées, mais elles peuvent être utilisées à discrétion.
|
|
| SELFHTML actuel Articles spécialisés JavaScript |
