ToutSurTout.biz / Javascript et les frames

Solenne · Discussion postée le 07-11-2009 à 05:15:30

Javascript et les frames

Les frames sont de plus en plus rejetées par le monde de l'internet. La plupart des grands sites les ont abandonnées et ont choisi de recopier sur chaque page le menu et tous les liens de leur navigation. Nous allons tout de même aborder la mise en place des frames et surtout leur intérêt dans la programmation JavaScript.

1 - Comment intégrer des frames ?

Pour créer une page séparée en plusieurs frames, il faut à l'origine une page principale qui remplace la zone BODY par la déclaration et le positionnement des frames.
La structure classique d'une page découpée en frames est celle-ci.

<HTML>
<HEAD>
<TITLE>Titre de page</TITLE>
</HEAD>

<FRAMESET cols="140,*">
<FRAMESET rows="*,50" frameborder=0>
<FRAME name="FRAME1" src="frame1.html">
<FRAME name="FRAME2" src="frame2.html">
</FRAMESET>
<FRAME name="FRAME3" src="frame3.html">

Nous n'allons pas voir en détail comment créer des frames, c'est là du langage HTML et la documentation est riche dans ce domaine.

2 - Le JavaScript dans les frames
La première application qui vient à l'esprit avec les frames est la création de menu. C'est en effet la principale utilité des frames - nous verrons qu'il y en a d'autres.
En HTML, pour créer un lien qui charge une page dans une frame, il faut écrire :

<A HREF="page.html" target="nom_frame">Le Lien</A>

Dans la balise A, target contient le nom de la frame à charger avec le fichier (ici page.html).
En JavaScript, pour charger une page dans une frame, on utilise une des instructions suivantes :

parent.frames[nu_frame].window.location="page.html"

Ici, on fait appel au tableau frames indicé par nu_frame. Ici la frame numéro nu_frame contient page.html.

parent.frames["frame1"].window.location="page.html"

Maintenant, on accède au tableau des frames par son nom. Le résultat est identique avec l'instruction suivante :

parent.frame1.window.location="page.html"

Si vous souhaitez charger 2 pages dans 2 frames différentes avec 1 seul clic, JavaScript le permet.
On commence par déclarer une fonction charger avec en paramètre les noms des pages à charger dans les 2 frames :

function charger(nom_page1,nom_page2) {
parent.frames["frame1"].window.location=nom_page1;
parent.frames["frame2"].window.location=nom_page2;
}

On suppose dans cet exemple que les frames s'appellent frame1 et frame2.
On crée ensuite un lien qui appelle la fonction JavaScript charger :

<A HREF="JavaScript:charger('page1.html','page2.html')">1 Clic et 2 pages chargées</A>

La seconde application est la sauvegarde d'informations tout au long d'une session de navigation. Les frames remplacent avantageusement les cookies s'il s'agit de stocker des informations juste pendant la navigation du visiteur. Les informations stockées sont perdues dès que le visiteur ferme son navigateur ou s'il remplace votre page par une autre.
Pour stocker des informations, il suffit de déclarer une variable dans l'entête de la fenêtre mère (celle qui contient la déclaration des frames grâce aux balises <FRAMESET>). Cette variable peut être juste une valeur (nombre, chaîne, ...) ou un objet complexe.

Exemple de stockage de l'heure d'ouverture de la session
Dans l'entête (entre les balises <HEAD> et </HEAD>) de la fenêtre parent, on déclare :

<SCRIPT language="javascript">
var heure=new Date();
heure=date.getTime() // transformation de la date en millisecondes
</SCRIPT>

Rappel : la fenêtre parent est celle qui contient la déclaration des frames

Dans la frame1, on a accès à cette variable en codant :

<SCRIPT language="javascript">
var h=parent.heure;
<SCRIPT>

Cette possibilité peut être étendue aux fonctions. De la même façon que la fenêtre parente peut sauver des variables, il est possible de coder des fonctions dans son entête et de les récupérer ensuite dans toutes les frames.

Exemple de déclaration d'une fonction dans la page parente
On souhaite utiliser dans toutes les frames une fonction qui affiche une ligne de copyright.
On commence par déclarer dans l'entête de la fenêtre parente la fonction AffCopyright().

<SCRIPT language="javascript">
function AffCopyright() {
document.write("<CENTER>Copyright 2000 - Tous droits réservés</CENTER>");
}
<SCRIPT>

Dans toutes les frames du site, il suffit, pour afficher cette note de copyright, d'appeler la fonction ainsi :

<SCRIPT language="javascript">parent.AffCopyright()<SCRIPT>

L'intérêt est évidemment la facilité de mise à jour sur toutes les pages du site de cette note de copyright. Il suffit de changer la fonction dans la page parent et les modifications se reportent automatiquement dans toutes les pages du site où la fonction est intégrée.

Les frames sont très utiles dans la conception de sites :

* Elles facilitent la création et la mise à jour de la navigation
* Elles offrent des possibilités de programmation en javascript (sauvegarde d'informations)