▼
13. Cadres
▼
- Objet Frame
- Accéder cadre
- Nombre de cadres
- Référer aux cadres
- Écrire
- Redimensionner
- Cadre cible
- Imprimer
Les cadres (frames) permettent de diviser une page Internet en plusieurs sections étant chacune comme une petite page autonome. On appelle ces sections des panneaux ou cadres. Un fichier de cadre parent, nommé jeu de cadres ou frameset, contient le code permettant de créer les cadres, de les nommer et d'indiquer si on veut qu'ils découpent l'espace horizontalement ou verticalement, ainsi que la taille qu'ils doivent avoir. Lorsqu'on travaille sur une page ayant des cadres avec Javascript, il faut toujours s'assurer qu'on accomplit nos actions sur le bon cadres et de donner le focus au bon cadre au bon moment.
L'objet Frame a plusieurs propriétés permettant un usage de base de ses composantes. La propriété frames est en fait un tableau de tous les cadres contenus dans le frameset principal, le cadre parent. Les valeurs d'index données aux différents cadres représentent leur ordre d'apparition dans le fichier.
Puisqu'un cadre est une fenêtre de navigateur disposée d'une manière précise, il possède également toutes les propriétés de document.
Exemple :
<html>
<head>
</head>
<frameset cols="*,*">
<frame name="ebay" src="http://www.ebay.ca" />
<frame name="yahoo" src="http://www.yahoo.fr" target="_top" />
</frameset>
</html>
On peut référer à un cadre via la valeur de son index dans la propriété frames du cadre parent. Ainsi le premier cadre s'accèderait par parent.frames[0]. Le nom du cadre peut également être utilisé, ce nom est défini dans l'attribut name de la balise <frame> . On peut combiner les deux, en référent au cadre souhaité via son nom dans le vecteur de frames.
Même si un cadre est créé par l'objet parent, on peut y accéder à partir de n'importe quel auter objet frame enfant. Donc, à partir d'un cadre, on peut modifier et accéder à toutes les propriétés des autres cadres.
Cependant, les propriétés de la barre d'état ne sont disponibles que pour la fenêtre parent. Les références à ces propriétés dans d'autres cadres seront tout simplement ignorées.
Il est possible de connaître le nombre de cadres contenus dans un jeu de cadres en utilisant la propriété length. Cette propriété permet également de déterminer le nombre de cadres enfants contenus dans le cadre actif. Si le cadre actif contient 2 cadres enfants, alors self.length retournera 2.
L'objet parent permet d'avoir accès au jeu de cadres qui a créé le frame actif. Pour accéder au frame actif maintenant, il faut utiliser l'objet self. L'objet top tant qu'à lui réfère au cadre le plus haut de la pile lorsqu'il s'agit de jeu de cadres imbriqués.
Si j'ai un jeu de cadre comportant 2 cadres nommés cadreA et cadreB, je peux faire référence à un champ de texte du cadreA à partir du cadre B avec l'instruction :
parent.cadreA.document.forms[0].champTexte.value
L'instruction document.write permet d'afficher du texte dans la fenêtre du navigateur. On peut écrire dans un cadre en utilisant cette même instruction, il suffit de sélectionner ce cadre au préalable.
Exemple :
// On a deux cadres, cadreA et cadreB, pour écrire dans B à partir de A :
parent.cadreB.document.write("Voici du texte venant de l'autre cadre.");
! Attention.. si vous désirez afficher du texte dans un autre cadre, assurez-vous qu'il existe, car si le navigateur ne peut le trouver, il affichera une erreur.
La seule différence qui fait en sorte que des cadres sont côte à côte ou empilés verticalement est l'attribut mis dans la balise <frameset>. Le premier cadre sera au-dessus si l'attribut rows est utilisé et il sera à gauche si l'attribut cols est utilisé. Dans ces attributs, on peut spécifier le pourcentage de l'espace qu'occupera chaque cadre ou employer * pour dire qu'ils doivent prendre l'espace restant.
Lorsque vous créez un jeu de cadres, vous pouvez ajouter dans les balises <frame> les évènements onMove, onResize, onBlur et onFocus. N'oubliez pas que lorsque vous référez à un cadre enfant à partir du jeu de cadres, il faut utiliser self. avant le nom du cadre enfant car le jeu de cadre est le cadre parent.
Les évènements onMove et onResize se déclenchent sur tous les cadres enfants en même temps. onMove est appelé lorsqu'une fenêtre est déplacée et onResize lorsqu'on redimensionne un cadre. Il est rare qu'on utilise ces évènements.
Parfois, on voudrait pouvoir identifier un cadre comme une cible pour le résultat d'une opération, par exemple comme endroit où afficher les résultats d'un formulaire ou l'endroit où afficher une page appelée via un lien.
Pour ce faire, vous devez préciser un attribut target à la balise <form> ou <a>.
Exemple :
<form name="formulaire" target="cadreB">
<input type="text" name="texte1" value="texte origine" />
</form>
Afin d'imprimer le contenu d'un cadre, vous devez utiliser la méthode print(). Cette méthode affiche la fenêtre d'impression standard de votre navigateur où vous devez appuyez sur OK pour déclencher l'impression.
Pour imprimer le contenu de la page entière, soit de tous les cadres, utilisez l'instruction :
parent.print();