Page précédente Table des matières

Les frames

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. Pour la syntaxe Html des frames, vous pouvez vous référer au tutorial du même auteur "Apprendre le langage Html - Les frames -" à l'adresse www.ccim.be/ccim328/html/index.htm

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 :

<=>

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".

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

Page précédente Table des matières