Leçon 7

Ouverture d'une nouvelle fenêtre

Saisissez précisément le contenu du listing suivant dans votre éditeur de texte préféré (il est plus simple et plus rapide de faire un "copier-coller").

<HTML>
<HEAD>
<TITLE>Nouvelle fenêtre</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function ouvrir(texte)
{
var haut = 140; // hauteur de la fenêtre (en pixels)
var larg = 120; // largeur de la fenêtre (en pixels)
var options = "toolbar=no,location=no,directories=no,status=no,"
+ "menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes,"
+ "width=" + larg + ",height=" + haut;
maFenetre=window.open("","",options);
maFenetre.document.open();
maFenetre.document.write(texte);
maFenetre.document.close();
}

</SCRIPT>
</HEAD>

<BODY>
Ecrivez quelque chose ici:<BR>
<FORM>
<INPUT NAME="texte" TYPE=Text SIZE="30">
<INPUT type="button" value="Cliquez ici" onclick="ouvrir(texte.value)">
</FORM>
</BODY>
</HTML>

Sauvegardez ce script dans un fichier que vous appelerez fenetre.html.
Démarrez maintenant un navigateur.
Ouvrez depuis votre navigateur le fichier fenetre.html et voyez le résultat.

En cas de problème, cliquez ici pour voir le résultat.

Explications

Le but de cette page est de pouvoir ouvrir une nouvelle fenêtre et d'y écrire un petit texte. Ce genre d'opérations peut être utile par exemple pour écrire le corrigé d'un questionnaire, ce qui sera l'objet de la leçon 8.
On remarque dans la fonction ouvrir toute une série d'options pour la nouvelle fenêtre. D'après le nom de ces options on arrive à deviner de quoi il s'agit. Vous pourrez les modifier dans l'exercice.
maFenetre=window.open("","",options) ouvre la fenêtre. La variable nommée maFenetre permettra de s'y référer, notamment lorsqu'il s'agira d'écrire à l'intérieur de cette fenêtre.
Pour écrire dans la nouvelle fenêtre, on procède comme à la leçon 1, sauf qu'il faut préfixer l'instruction document.write par maFenetre. Afin que l'affichage se déroule toujours correctement, il faut encadrer les instructions maFenetre.document.write par maFenetre.document.open() et maFenetre.document.close() (cela est obligatoire avec Netscape, mais facultatif avec Explorer).

Exercice

1. Changez la taille de la fenêtre et les valeurs des options (no/yes). Observez à chaque fois l'effet obtenu.

2. Faites en sorte que la nouvelle fenêtre ait un fond bleu clair.

Correction: Cliquez ici pour voir le résultat, puis visualisez le code source.

Didier Müller, 11.10.20