Les Fenêtres



  1. A quoi ça sert ?

On va ici voir la partie concernant les fenêtres, aussi bien la fenêtre courante que les nouvelles fenêtres.
Pour chaque exemple, on verra les différentes options proposées, ainsi qu'un exemple de code et d'utilisation.



  2. Affichage d'une fenêtre pop-up



  2. 1. Présentation

L'intérêt des fenêtres pop-up est simple : afficher une nouvelle fenêtre pour présenter dans une page sans menu, sans barres d'outils...
Je m'en sers pour afficher les jaquettes des DVDs afin de pouvoir naviguer de l'un à l'autre.

Voici le code Javascript associé à l'ouverture d'une nouvelle fenêtre :
<script language="JavaScript">
<!-- debut du script
var fenetreErreur;

function affichImg(message,largeur, hauteur) {
  fenetreErreur = window.open(message, 'titre', 'toolbar=no,location=no,directories=no,
        status=no,scrollbars=yes,resizable=no,copyhistory=no,'
        + 'width='+ largeur + ',height='+hauteur);
  fenetreErreur.moveTo(50,50);
  fenetreErreur.focus();
  return false;
}
// Fin du script -->
</script>

Ensuite, il suffit de mettre un lien qui gère l'affichage de la page dans la fenêtre pop-up :
<a href="javascript:affichImg('/images/std/accueil2.gif',200,330)">Ouverture de l'image</a>

Ce qui donne comme résultat :
Ouverture de l'image de la page d'accueil dans une nouvelle fenêtre


  2. 2. Explication

Déjà, on voit la ligne function afficheErreur(message,largeur,hauteur). Cette ligne permet de définir les variables passées en paramètre pour la fonction en question. Ces paramètres sont utilisés plus loin dans la fonction afin de préciser le message (en l'occurrence le nom du fichier à charger), la hauteur et la largeur de la fenêtre.

Ensuite, on fait un window.open dans la variable fenetreErreur, définie juste au dessus (avec le "var").
De nombreux paramètres sont passés au window.open :
  • Le nom du fichier (qui peut être une image, un fichier html, php... Tout ce qui peut s'afficher dans un navigateur).
  • Le titre de la nouvelle page. Ici, la valeur est fixée à 'titre'.
  • Les autres paramètres permettent de fixer l'apparence de la nouvelle fenêtre :
    • toolbar=[yes|no] : affichage des barres d'outils
    • location=[yes|no] : affichage de la barre de saisie d'adresse URL
    • directories=[yes|no] : affichage des répertoires
    • status=[yes|no] : affichage de la barre d'état
    • scrollbars=[yes|no] : affichage des scrolls
    • resizable=[yes|no] : possibilité de redimensionner la fenêtre
    • copyhistory=[yes|no] : ajouter la page dans l'historique
    • width='+ largeur : largeur de la fenêtre
    • height='+hauteur : hauteur de la fenêtre

    La fonction "moveTo(50,50)" permet de déplacer la fenêtre qui vient d'être créer à la position 50 en abscisse et 50 en ordonnée. Ceci est très pratique pour éviter que la fenêtre soir positionnée n'importe où par le navigateur.

    Enfin, la fonction "focus" permet simplement de définir la page qui vient d'être créée comme page ayant le focus, c'est à dire étant au premier plan, et avec la barre des titres activée.



      3. Affichage d'une fenêtre pop-up et raffraichissement de la fenêtre principale

    Nous venons de voir le principe de la fenêtre pop-up. Dans certains cas, comme la gestion d'une base de donnees, il peut être pratique d'ajouter des éléments dans une fenêtre et d'automatiquement raffraichir la fenêtre principale pour faciliter la lecture des utilisateurs. Pour ce faire, il suffit de reprendre le code d'ouverture de la fenêtre pop-up précédente, et d'ajouter dans le code de la fenêtre le code suivant :
    <script language="JavaScript">
    <!-- debut du script
    document.parent.reload();
    // Fin du script -->
    </script>

    ou
    <script language="JavaScript">
    <!-- debut du script
    window.opener.reload();
    // Fin du script -->
    </script>


    La meilleure chose est de passer ce code javascript juste après la mise à jour de la base de données, donc sur la page qui est appelée dans votre formulaire.

    Sinon, pour essayer, voici le code que vous pouvez tester :
     » Code de la fenetre principale
    <html>
    <head>
      <title>Ouverture de Pop-up</title>
    </head>
    <body>
    <script language="JavaScript">
    <!-- debut du script
    var fenetreErreur;

    function affichImg(message,largeur, hauteur) {
      var fenetreOption = 'toolbar=no,location=no,directories=no,status=no,width='+largeur+',height='+hauteur;
      fenetreErreur = window.open(message,'titre',fenetreOption);
      fenetreErreur.moveTo(50,50);
      fenetreErreur.focus();
      return false;
    }

    //  Fin du script -->
    </script>
    < Href="" onClick="return affichImg('./test.html',330,200)">test de Raffrachissement</a>
    </body>
    </html>


     » Code de la fenetre pop-up
    <html>
    <head>
      <title>Test de raffraichissement</title>
    </head>
    <body>
    <input type=button value="Raffraichir la page" 
    onClick="javascript:window.opener.location.reload();">
    <br>
    <input type=button value="Page d'accueil" 
    onClick="javascript:window.opener.location='http://www.hobbesworld.com';">
    <br>
    </body>
    </html>





    Page modifiée le : 24/07/2003
    Site modifié le : 16/05/2016


    Valid XHTML 1.0 Transitional

  •