Introduction to JavaScript
Chapitre 3
Voici le script HTML pour les frames:
Vous devez en premier indiquer au navigateur le nombre de cadres que vous désirez.
Ceci est défini dans la balise <frameset...>. Le paramètre rows divisera l'espace
selon des bandes horizontales. Pour créer à la place plusieurs colonnes, remplacez rows par
cols. Vous pouvez bien entendu utiliser plusieurs balises <frameset...>.
Voici un exemple fourni par Netscape:
Vous allez créer 2 colonnes, la deuxième est elle même divisée en 3 parties égales.
Les 50%,50% dans la première balise <frameset> indique au navigateur la taille de celles-ci.
Je crois que l'utilisation de base des frames sont facile à comprendre.
Passons à l'exemple suivant:
Ceci montre une fenêtre où un click sur certains boutons affiche un texte dans un autre cadre.
Pour créer ces frames le fichier fframes.php est nécessaire:
Voici le code de fframe1.php:
Et maintenant celui de fframe2.php:
Wahoo! Les scripts deviennent de plus en plus longs et complexes!
Qu'avons nous faits ici? L'utilisateur charge le premier fichier(fframes.php).
Celui-ci crée les frames et charge le fichier HTML fframe1.php dans le premier
cadre (nommé 'fr1'), puis fframe2.php dans le second (nommé 'fr2').
Jusqu'ici, il ne s'agit que de code HTML. Comme vous pouvez le voir le fichier fframe2.php
contient des fonctions JavaScript. Celles-ci sont appelées depuis les propriétés, bien connues, onClick de
3 boutons qui seront créés par la suite de la même façon que dans la première partie de cette introduction.
Mais que signifie le parent.fr1?
Si vous êtes familiarisé avec les objets ceci ne sera guère nouveau pour vous.
Comme nous l'avons vu ci-dessus les fichiers Fframe1.php et Fframe2.php sont appelés
depuis le fichier Fframes.php. Ce dernier est appelé parent des deux autres frames.
Par conséquent les deux nouvelles frames sont appelées enfants (child-frames) de Fframes.php.
Vous pouvez voir que cette sorte de hiérarchie instaure des relations entre les différents cadres.
Je vais tenter d'illustrer cette notion à l'aide d'un petit "graphique" (ASCII-art serait une meilleur définition...):
Vous pouvez bien sûr étendre ce concept. Vous pouvez créer des "petits enfants"(grandchildren)
(Si vous voulez les appelez comme ça. Il n'y a pas de terme officiel!).
Pour indexer quoique ce soit dans le cadre parent depuis fframe2.tm, il vous
suffit de le faire précéder par parent.. Utiliser les fonctions définies dans
fframe1.php depuis le cadre parent se fait en rajoutant fr1 avant l'appel à la fonction.
Pourquoi fr1? Dans le fichier parent (fframes.php) vous avez créé des frames différentes
et leur avez donné des noms différents. J'ai choisi fr1 pour le premier cadre. L'enchaînement
devient évident. Comment est nommé le premier cadre si je veux l'indexer depuis le second
nommé fr2 (situé dans le fichier fframe2.php)? Comme vous le montre mon graphique formidable
il n'y a pas de liaison direct entre fframe1.php et fframe2.php. Vous ne pouvez donc pas adresser
directement des fonctions défini dans fframe1.php depuis fframe2.php. Vous devez le faire
par l'intermédiaire du cadre parent. Le véritable index est donc parent.fr1.
Si vous voulez référencer le contenu du cadre fr1 depuis fframe2.php il vous suffit d'écrire parent.fr1.document.
Ceci est ce qui a été utilisé avec le second script dans les fonctions hi, bla, yo.
Si vous avez créé des cadres et qu'un lien est emprunté, les cadres ne disparaissent point.
Ceci est normal si l'utilisateur 'demeure' dans vos pages. Vous pouvez, par exemple, créer une barre de menu qui
est constamment présente dans un petit cadre. Mais si l'utilisateur saute vers une autre page Internet
votre barre de menu ne devrait plus être nécessaire.
Comment faire pour supprimer des cadres une fois créés?
Simplement en ajoutant TARGET="_top" à la balise <a href...>. Voici à quoi cela ressemble:
Evidemment vous devez ajouter TARGET="_top" à tous les liens menant vers "l'extérieur".
Si tous vos liens conduisent vers "l'extérieur" vous pouvez aussi écrire <base target="_top"> dans la
partie HEAD de votre page HTML. Ceci indique que tous les liens de la page suppriment les cadres.
Nombreux sont ceux qui se demandent comment utiliser JavaScript avec les frames.
Pour cela il vous faut Netscape 2.0 (ou ultérieur) voire Internet Explorer 3.0.
La plupart des autres navigateurs supportent soit les frames mais pas JavaScript soit l'inverse.
Tout d'abord, présentons les frames. Utiliser des frames vous permet de diviser la fenêtre
affichant les pages HTML en plusieurs cadres (parties distinctes) indépendants les uns des autres.
Vous pouvez charger des pages différentes dans chaque cadre. Ce qui est intéressant c'est la capacité
de ces cadres à interagir. C'est à dire qu'ils peuvent s'échanger des informations.
Par exemple vous pouvez créer 2 cadres, l'un avec une page HTML classique et l'autre avec une barre d'outils.
La barre d'outils peut contenir des boutons servant à naviguer dans l'autre page HTML.
Cette barre d'outils sera toujours visible lorsqu'une nouvelle page sera chargée dans l'autre cadre.
Premièrement, je veux vous montrer de quoi elles ont l'air. Il vous suffit pour cela de presser le
bouton.(Si vous visionnez cette page sur Internet vous attendrez un petit peu car les scripts doivent être
chargés depuis le serveur)
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="ffrtest1.php" name="fr1">
<FRAME SRC="ffrtest2.php" name="fr2">
</FRAMESET>
</HTML>
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="fcell.php">
<FRAME SRC="fcell.php">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="fcell.php">
<FRAME SRC="fcell.php">
<FRAME SRC="fcell.php">
</FRAMESET>
</FRAMESET>
Vous pouvez nommer vos frames. Ceci est important lors d'une utilisation avec JavaScript.
Dans le premier exemple vous avez vu comment leur attribuer un nom (paramètre name).
Grâce aux balises <frame> vous indiquez au navigateur quelle page HTML il doit charger dans
ce cadre.
En voilà le code source:
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="fframe1.php" name="fr1" noresize>
<FRAME SRC="fframe2.php" name="fr2">
</FRAMESET>
</HTML>
<HTML>
<BODY>
Ceci est la première frame!
</BODY>
</HTML>
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Masque
function hi() {
parent.fr1.document.write("Salut!<br>");
}
function yo() {
parent.fr1.document.write("Yo!<br>");
}
function bla() {
parent.fr1.document.write("bla bla bla<br>");
}
// -->
</script>
</HEAD>
<body>
Ceci est la seconde Frame!
<p>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Salut" onClick="hi()">
<INPUT TYPE="button" VALUE="Yo" onClick="yo()">
<INPUT TYPE="button" VALUE="Bla" onCLick="bla()">
</FORM>
</BODY>
</HTML>
Fframes.php parent
/ \
/ \
/ \
fr1(Fframe1.php) fr2(Fframe2.php) enfant
Fframes.php parent
/ \
/ \
/ \
fr1(Fframe1.php) fr2(Fframe2.php) enfant
/ \
/ \
/ \
gchild1 gchild2 'petit enfant'
<a href="goaway.php" TARGET="_top">Pour ne plus regarder ma page stupide pour le moment</a>