Transférer des données d'une page HTML à une autre avec Web Creator

Transfert d'une donnée

Exemple de scripts pour transférer une variable d'une page HTML vers une autre page HTML. Scripts faciles à rentrer sur Web Creator.

Dans l'exemple qui suit il n'y a qu'une seule variable à transférer.

il s'agit en cliquant sur une petite image de la page source d'ouvrir le diaporama de la page cible sur la même image avec sa légende.

Page Source http//site/index.html

Bx1, Bx2 ... sont des boîtes contenant des petites images.

Attention ! Les boîtes sont indicées sur les mêmes indices que ceux des images de la cible pour des raisons pratiques.

Le script suivant va sélectionner, après le clic sur la boîte Bx, l'indice x de l'image de la cible (le même que celui de la légende Txt1, Txt2 ...) et le signaler à la page cible.

Le script: (javascript) à rentrer sur la page Source

//Transfert externe

var x=0;

function Bx1_OnClick()

{

   var x=1;

   var post =x;

   transfert();

}

function Bx2_OnClick()

{

   var x=2;

   var post =x;

}

function Bx3_OnClick()

{

   var x=3;

   var post =x;

   transfert();

}

function Bx4_OnClick()

{

   var x=4;

   var post =x;

   transfert();

}

function transfert()

{

   post = escape(post) ;

   window.location.href = "./photos/diapo.html?" + post ;

}

//Fin Transfert externe

Commentaires :

Un click sur un élément Bx sélectionne l'indice et appelle la fonction "transfert()".

x : nom de la variable dont la valeur va être transférée. La valeur transférée correspondra à la valeur de l'indice de l'image (et de la légende) qui doit être affichée en page cible.

post : chaîne de caractères qui peut prendre plusieurs variables.

Avec une seule variable la chaine post se réduit à x. le transfert est simple.

On verra dans la page "Transfert : n variables" le transferts de plusieurs données.

C'est cette chaîne qui est transférée.

escape : encode les caractères spéciaux.

window.location.href : indique à la page appelée une information supplémentaire. Dans ce cas la page s'ouvrira automatiquement sous le nom ./photos/diapo.html?2 si post=2.

Ne pas oublier le point d'interrogation.

Remarque :

Il paraît inutile de transférer les noms de variables, sauf cas exceptionnels.

Page Cible http://site/photos/diapo.html

Image1, Image2 ... sont des grandes images initialement cachées. Elles ont toutes le même nom et un indice;

Txt1,Txt2 ... sont les légendes des images initialement cachées. Elles ont toutes le même nom et un indice;

But1, But2 ... sont les boutons classiques du diaporama qui ne font pas l'objet de notre procédure.

L'image sélectionnée en page source sera affichée par le script suivant :

Le script: (javascript) à rentrer sur la page Cible

//Transfert externe

var post =  window.location.search;

post=post.substring(1) ;

var x=post;

var Imag = "Image"+x;

var Texte = "Txt"+x;

document.getElementById(Imag).style.display = 'block';

document.getElementById(Texte).style.display = 'block';

//Fin Transfert externe

Commentaires :

window.location.search : c'est l'information reçue par la page.

On place cette information dans post. C'est une chaine de caractères commençant par "?". S'il y a plusieurs variables transférées il faudra les séparer dans la chaîne de caractères. Ici c'est inutile.

post=post.substring(1) : On supprime le "?" en tête de la chaîne de caractères post.

x=post : on affecte la valeur contenue dans post à x

var Imag = "Image"+x : Imag sera "Image1" ou "Image2"...

var Texte = "Txt"+x : Texte sera "Txt1" ou "Txt2"...

document.getElementById(Imag).style.display = 'block' : affichage de l'image.

Et affichage du texte.

On pourrait aussi avoir :

document.getElementById(Imag).style.display = 'none';

pour cacher une image.