Programmation multi-cadres

Rappels HTML

La balise <FRAMESET> est une directive de partage de la fenêtre initiale du navigateur en sous-fenêtres
Les documents Elle remplace la balise <BODY>
Chaque balise décrivant chaque "frame", cadre est <FRAME>
Chaque document est décrit par

Un exemple

Divisons la fenêtre en deux colonnes principales d'égales largeurs. Ensuite, la colonne de droite est elle-même divisée en 3 rangées d'égales hauteurs.

code représentation

... <FRAMESET COLS="50%,50%"> <FRAME SRC="fichier1.htm"> <FRAMESET ROWS="33%,33%,33%"> <FRAME SRC="fichier2.htm"> <FRAME SRC="fichier3.htm"> <FRAME SRC="fichier4.htm"> </FRAMESET> </FRAMESET>

fichier1.htm fichier2.htm

fichier3.htm

fichier4.htm

Bien sûr, dans les 4 cadres, ce sont les contenus des 4 documents fichier1.htm , fichier2.htm...etc.. qui seront affichés.

Les principales balises

<FRAMESET > </FRAMESET>
<FRAMESET ROWS=description-partage-rangées COLS= description-partage-colonnes
Cette balise commande la division de la fenêtre du navigateur en plusieurs fenêtres juxtaposées et indépendantes.
- Les paramètres ROWS et COLS permettent de partager une zone en plusieurs fenêtres disposées (respectivement) horizontales OU verticales.
- Ils sont suivis d'une liste de valeurs, séparées par des virgules, qui détermine le fractionnement de la fenêtre, soit en hauteur (pour ROWS), soit en largeur (pour COLS). Le plus souvent, ces valeurs sont exprimées pourcentage de l'espace disponible.
- Quelques exemples
  ROWS= "30%, 70% " signifie un partage en 2 rangées dont les hauteurs sont les 30% et 70% de la hauteur disponible dans la fenêtre.
  ROWS= "30%, 50%, * " signifie un partage en 3 rangées de hauteur (de haut en bas) 30%, 50% et le reste, indiqué par * (c'est-à-dire ici 20 %).
  COLS = "150, * , * " signifie un partage de la largeur disponible en 3 colonnes : celle de gauche mesurera 150 pixels exactement en largeur, et les 2 autres auront la même largeur en se partageant le reste de l'espace disponible.
  COLS = " *, * , *, * " provoque un partage de la largeur disponible en 4 colonnes de même largeur.
  COLS = "10%, * , 2 * " signifie un partage en 3 colonnes de largeurs 10%, 30% et 60 %.
<FRAME .. >
<FRAME SCR = "fichier.htm " NAME=nom-cadre ... > </ FRAME>
- SRC définit le contenu du cadre. Il faut y indiquer le nom du fichier HTML à charger dans le cadre, éventuellement sous forme d'URL pour un fichier non local
- NAME = "nom du cadre", indispensable pour JS
- SCROLLING = "yes" | "no" | "auto" impose ou non la présence de barre de défilement.
  Si on choisit SCROLLING = "auto" , les barres de défilement apparaîtront en cas de besoin.
- NORESIZE interdit la modification de la taille par l'utilisateur (par défaut, tous les cadres sont modifiables.

L'attribut target dans les hyperliens

En l'absence d'indication complémentaire, une marque habituelle d'hyperlien <A HREF="URL" > .... </A>, placée dans un cadre commandera l'affichage de ce document à l'intérieur du cadre même.
Si l'hyperlien doit provoquer l'affichage dans un autre cadre, il faut préciser le nom du cadre de destination, indiqué comme valeur du paramètre TARGET
Ainsi : <A HREF=" doc1.htm" TARGET = "cadre3" >voir ce document </A> affichera le document doc1.htm dans le cadre nommé cadre3.
Pour adresser le document au cadre parent TARGET = "_parent" et pour revenir à la fenêtre complète, indiquer TARGET = "_top"

Petit exemple :

code représentation

<- extrait document principal ->
<FRAMESET COLS="50%,50%"> <FRAME SRC="fichier1.htm" name="cadre1"> <FRAMESET ROWS=" 30% , * " > <FRAME SRC="fichier2.htm" name="cadre2"> <FRAME SRC="fichier3.htm" name="cadre3"> </FRAMESET> </FRAMESET> <- extrait document fichier2.htm ->
<A HREF="monchat.gif" TARGET = "cadre3" > et voici mon chat</A> <- extrait document fichier3.htm ->
<PRE> <font size=-1> Cliquez vite dans le cadre au dessus, pour admirer ... </font> </PRE>

avant activation
Ma page personnelle et voici mon chat

Cliquez vite dans le cadre au dessus, pour admirer ...

après activation du lien
Ma page personnelle et voici mon chat

Gestion des cadres en JS

L'objet frames[]

Le navigateur crée un tableau frames, dont les éléments frames[x], x=0,1,, où 0,1, 2 est l'ordre d'introduction des cadres dans le fichier "parent". sont les cadres rangés dans leur ordre de déclaration. Le nombre de cadres est alors accessible par frames.length
On peut ainsi nommer les cadres par frames[i] ou par leur nom. La référence complète pour utiliser les propriétés et les méthodes des objets situés d'un cadre, est :
- window.nom-cadre.objet.propriété
- window.frames[num].objet.méthode()
Mais comment faire référence à une objet inclus dans un cadre à partir de code situé dans le document d'un autre cadre ?
Les propriétés self, parent, top font référence respectivement au cadre courant, au cadre parent et à la fenêtre d'origine, ou au cadre partagé, dans le cas d'imbrication.
Exemples :
- Pour afficher "Bonjour !" dans la zone de texte nommée message, située dans le formulaire formu du document du cadre nommé cadre_bas :
  parent.cadre_bas.formu.message= "Bonjour !"
- Pour afficher l'image N°4, déjà chargée en mémoire dans un tableau d'images du document courant, dans le 2ème cadre :
  parent.frames[1].location.href= tabImages[3].src

Gestion des liens

On sait que l'objet documents posséde une propriété-tableau links[] qui rassemble tous les liens du document.
Sa propriété target correspond à l'attribut target de la balise <A HREF=url ..>
Exemples
- Envoyer le document référencé par le lien dans le cadre nommé cadre_haut
  document.links[1].target = "cadre_haut"
- Afficher le document (ou l'image) dans la fenetre nommée maFenetre window.fen = open("c-frames.html","maFenetre", options);
  document.links[0].target = "maFenetre";