Au travers de ces différentes pages, nous essayerons de vous familiariser avec le Javascript.
Nous vous souhaitons une bonne lecture, mais surtout une bonne programmation :)
Chapitre 22.1 Généralités
Tout d'abord, présentons les frames. Utiliser des frames vous permet de diviser la fenêtre affichant votre page HTML en plusieurs cadres (parties distinctes) indépendants les uns des autres. Vous pouvez alors charger des pages différentes dans chaque cadre. En Javascript, nous nous intéresserons à la capacité de ces cadres à interagir. C'est à dire à la capacité d'échanger des informations entre les frames.
En effet, la philosophie du Html veut que chaque page composant un site soit une entité indépendante. Comment pourrait-on faire alors pour garder des informations tout au long du site ou tout simplement passer des informations d'une page à une autre page. Tout simplement (sic), en utilisant des frames.
Le schéma suivant éclairera le propos :
» Chapitre 22.2 Propriétés
Propriétés | Description |
| |
length | Retourne le nombre de frames subordonnés dans un cadre "créateur". |
parent | Synonyme pour le frame "créateur". |
» Chapitre 22.3 Echange d'informations entre frames
Par l'exemple suivant, nous allons transférer une donnée introduite par l'utilisateur dans une frame, dans une autre frame. La page "créatrice" des frames
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="enfant1.htm" name="enfant1">
<FRAME SRC="enfant2.htm" name="enfant2">
</FRAMESET>
</HTML>
La page "créatrice" contient deux frames subordonnées "enfant1" et "enfant2".
Le fichier enfant1.htm
<HTML>
<BODY>
<FORM name="form1">
<INPUT TYPE="TEXT" NAME="en" value=" ">
</FORM>
</BODY>
</HTML>
Le fichier enfant2.htm
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!--
function affi(form) {
parent.enfant1.document.form1.en.value=document.form2.out.value
}
// -->
</SCRIPT>
</HEAD>
<BODY>
Entrez une valeur et cliquez sur "Envoyer".
<FORM NAME="form2" >
<INPUT TYPE="TEXT" NAME="out">
<INPUT TYPE="button" VALUE="Envoyer" onClick="affi(this.form)">
</FORM>
</BODY>
</HTML>
La donnée entrée par l'utilisateur se trouve par le chemin document.form2.out.value. Nous allons transférer cette donnée dans la zone de texte de l'autre frame. Pour cela, il faut en spécifier le chemin complet. D'abord la zone de texte se trouve dans la frame subordonnée appelée enfant1. Donc le chemin commence par parent.enfant1. Dans cette frame se trouve un document qui contient un formulaire (form1) qui contient une zone de texte (en) qui a comme propriété value. Ce qui fait comme chemin document.form1.en.value. L'expression complète est bien : parent.enfant1.document.form1.en.value=document.form2.out.value
