Exercice HTML : Frames, fenêtres de navigateur, iframes

Thème

Réalisation de frames HTML (partage de la fenêtre du browser Web en sous-fenêtres), et manipulation de fenêtres de navigateur.

La technique des frames (cadres) est principalement utilisée lorsque l'on veut mettre en place des barres de navigation ou lorsque l'on veut réaliser des mises en page complexes.

Remarque : les frames HTML sont supportés à partir des versions de browsers Netscape 2 et IExplorer 3

Attention cependant aux limites des frames :

  1. l'URL apparaissant au haut de la fenêtre est celui du frameset et reste constant lors de la navigation à travers les frames ; c'est donc celui-là qui est, le cas échéant, mémorisé dans les bookmarks de l'utilisateur
  2. si l'utilisateur mémorise, dans ses bookmarks (favoris) l'URL d'un frame (après avoir ouvert ce frame dans une nouvelle fenêtre de browser), en revenant ultérieurement sur ce signet l'utilisateur perdra le contexte (c-à-d. les autres frames) nécessaire à une bonne compréhension du contenu
  3. plus grave encore : la plupart des moteurs de recherche refusent d'indexer les frames en raison du point 2 ci-dessus (ils s'arrêtent au niveau du frameset, ou descendent parfois juste dans les pages correspondant aux URLs se trouvant dans le bloc <NOFRAME>...</NOFRAME>) ; les parties d'un site construites sur la base de frames resteront donc invisibles du moteur de recherche (non indexées)
Comme alternative aux frames pour faire usage, dans un ensemble de pages Web, de code HTML commun à ces pages (barres de navigation...), on utilisera la technique du Server Side Include (SSI) ou l'un des mombreux systèmes de templating sous PHP (FastTemplate, PHPlib, Smarty...).

Balises et JavaScript relatifs aux frames

Remarques Usage de JavaScript dans la manipulation des frames de fenêtres

A) Pour mettre à jour plusieurs frames à la fois lorsque l'on active un lien, on est obligé de recourir à JavaScript. Dans la page où est défini le lien :

1) définir le JavaScript suivant (dans le bloc <HEAD>...</HEAD>) :
  <SCRIPT LANGUAGE="JavaScript">
    <!--
        function TwoFrames(URL1,Fr1Name,URL2,Fr2Name) {
             parent.frames[Fr1Name].location.href=URL1;
             parent.frames[Fr2Name].location.href=URL2;
        }
    //-->
  </SCRIPT>
2) puis définir ainsi le lien qui devra charger les pages "page1.html" et "page2.html" respectivement dans les frames définis par les cibles "frame1" et "frame2" :
  <A HREF="javascript:TwoFrames('page1.html','frame1','page2.html','frame2');">lien</A>
B) Pour ouvrir de nouvelles fenêtres de navigateur en jouant sur les propriétés de celles-ci (avec ou sans barre d'icônes, de menus, d'ascenseurs, etc...) ou les refermer, on doit également faire appel à JavaScript

1) si l'on défini les fonctions JavaScript suivantes (dans le bloc <HEAD>...</HEAD>) :
  <SCRIPT LANGUAGE="JavaScript">
    <!--
        function ouvrir_fenetre(url,target_name,param) {
          nomFenetre = window.open(url,target_name,param) ;
        }
        function fermer_fenetre() {
          if (nomFenetre) { nomFenetre.close() ;  }
        }
    //-->
  </SCRIPT>
2) on peut alors faire ouvrir une fenêtre sans aucun attribut (palette de navigation) à partir du lien hypertexte suivant (attention à bien englober tous les paramètres, depuis toolbar jusqu'à screenY entre deux apostrophes !) :
  <A HREF="Javascript:ouvrir_fenetre('URL','palette_navig',
        'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,
         resizable=no,copyhistory=no,width=250,height=400,screenX=20,screenY=100' )">
     ouvrir </A>
3) et l'on peut faire refermer cette fenêtre à partir du lien hypertexte suivant :
  <A HREF="Javascript:fermer_fenetre()"> fermer </A>

Les frames en-ligne (IFRAME)

Standardisée sous HTML 4.01, la notion de "frame en-ligne" (inline frame, iframe) est appliquable depuis les versions de navigateur Mozilla 1, Netscape 6, IE 4. Un peu à la façon de la balise OBJECT pour l'insertion d'objets en-ligne dans une page, cette technique implémentée coté client permet d'inclure une ressource Web (page HTML statique ou dynamique...) dans un bloc à l'intérieur d'une page (analogie à la technique coté serveur SSI, Server Side Include).

Références

Donnée de l'exercice

Réaliser le "frameset" illustré par la copie d'écran ci-dessous :

Corrigé de l'exercice

Cliquez ici pour faire apparaître ce frameset dans votre browser...

Fichier "frameset.html"

  <HTML>
  <HEAD>
     <TITLE>Exercice HTML : Définition d'un frameset</TITLE>
  </HEAD>
  <FRAMESET ROWS="*,30" BORDER="2">

    <FRAMESET COLS="160,*">
        <FRAME SRC="frame_navig.html" NAME="navig">
        <FRAME SRC="frame_page.html" NAME="page">
    </FRAMESET>

    <FRAME SRC="frame_pied.html" NORESIZE SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1"
     NAME="pied">

    <NOFRAME>
      <B>Attention</B> : ce document contient des "frames" que votre navigateur WWW n'est
      pas capable d'interpréter. Utilisez Netscape Navigator (vers. 2 ou sup.) ou
      Microsoft Internet Explorer (vers. 3 ou sup.) ; sinon,
      <A HREF="frame_navig.html"><B>suivez ce lien</B></A>.
    </NOFRAME>

  </FRAMESET>
  </HTML>

Fichier "frame_navig.html"

  <HTML>
  <HEAD>
     <TITLE>Exercice HTML : frame de navigation</TITLE>
  </HEAD>
  <BODY BGCOLOR="YELLOW">

  <CENTER>
  <B>Frame de navigation</B>
  </CENTER>

  <P><HR WIDTH="60%" SIZE="1"><P>
  <UL>
  <LI><A HREF=111.html TARGET="page">111</A>
  <LI><A HREF=222.html TARGET="page">222</A>
      <P>
  <LI><A HREF=frame_back.html TARGET="_top">back</A>
  </UL>
  <P><HR WIDTH="60%" SIZE="1"><P>

  </BODY>
  </HTML>

Fichier "frame_page.html"

  <HTML>
  <HEAD>
     <TITLE>Exercice HTML : frame de bienvenue</TITLE>
  </HEAD>
  <BODY BGCOLOR="WHITE">

  <CENTER><B>Frame de bienvenue</B></CENTER>

  </BODY>
  </HTML>

Fichier "frame_pied.html"

  <HTML>
  <HEAD>
     <TITLE>Exercice HTML : frame de pied de page</TITLE>
  </HEAD>
  <BODY BGCOLOR="GRAY">

  <CENTER><B>Pied de page</B></CENTER>

  </BODY>
  </HTML>


Exercices HTML © J.-D. Bonjour / SI-DGR, EPFL / Révision 25.5.2004