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>

    <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 pour la fenêtre 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>

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

    </body>

    </html>

Et celui 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 : 02/10/2024