Alors, vous voulez ouvrir des Fenêtres de Navigateur ?
JavaScript Fait des Fenêtres...
Où vous les voulez, Aussi grandes que vous les voulez, et avec les Options de Navigateur que vous Désirez...
Après cette leçon, vous pourrez :
Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.
Dans la leçon 25, nous avons appris comment ajouter une option TARGET à un hyperlien afin qu'un clic de souris nous ouvre le lien dans une nouvelle fenêtre de navigateur. Vous aurez peut-être remarqué que cette seconde fenêtre s'ouvre avec les mêmes boutons et champs de navigateur que la fenêtre originale, et qu'elle est également de la même taille.
Avec JavaScript, nous pouvons créer de nouvelles fenêtres de n'importe quelle taille, et les paramétrer afin que le champ URL ou les boutons de navigation n'apparaissent pas. De plus, pour les navigateurs de version 4.0, nous pouvons même spécifier où la fenêtre doit apparaitre sur l'écran.
Pourquoi voudrions-nous faire une chose pareille ? Si nous chargeons une image dans une nouvelle fenêtre de navigateur, il n'y a pas vraiment besoin des boutons et des champs du navigateur qui prennent une place précieuse à l'écran. De plus, cela nous permet de créer de petites fenêtres fonctionnant comme des "boites à outils" dans d'autres programmes.
Regardez cette photo d'un cratère au Mexique s'ouvrant dans une mince fenêtre ou celle d'une montagne volcanique en Arizona s'ouvrant dans une fenêtre à la taille de l'image. Enfin, essayez de regarder notre Bouteille rose JavaScript dans une petite fenêtre affichant les boutons de navigation.
Le format général de ce code JavaScript ressemble à :
<a href="URL"
onClick="window.open('URL', 'nom_de_fenêtre', 'options_de_fenêtre'); return false">
texte de lien</a>
où URL est l'URL de l'image que nous voulons afficher dans cette nouvelle fenêtre. Comme nous l'avons vu dans la leçon 27a, on utilise le même URL dans la partie href et on rajoute un return=false dans la commande JavaScript onClick au cas où notre visiteur utilise un navigateur ne supportant pas le JavaScript. Dans ce cas, le tag de lien l'enverra dans une nouvelle page web qui affichera l'image.
L'évènement JavaScript onClick démarre l'action : une commande appelée window.open() qui demande au navigateur web d'ouvrir une nouvelle fenêtre. La fenêtre est remplie avec le contenu spécifié par l'URL dans le premier paramètre qui, dans les exemples ci-dessus, était un fichier image, mais pourrait aussi être un fichier HTML ou un URL distant. Le deucième paramètre donne un "nom" à cette fenêtre, au cas où nous voudrions l'utiliser de nouveau pour y afficher un lien (voir la leçon 25).
Le troisième paramètre donne la liste des options indiquant l'apparence de la fenêtre. Ces éléments sont contenus dans une longue chaine de texte encadrée par des apostrophes :
Vous pouvez lister les sept premières avec OPTION=yes ou OPTION=no pour préciser que nous voulons les afficher ou les omettre dans nos nouvelles fenêtres, en les séparant par des virgules. Par exemple :
vous pouvez jeter un coup d'oeil à
<A HREF="myimage.gif"
onClick="window.open('myimage.gif', 'myWin',
'toolbar=no, directories=no, location=no,
status=yes, menubar=no, resizable=no, scrollbars=no,
width=300, height=200');
return false"
>ma photo</a>.
créera un lien pour ouvrir un fichier image myimage.gif dans une fenêtre appelée "myWin", sans boutons de navigation, et de taille fixe ; vous ne pouvez pas modifier la taille ou utiliser les barres de défilement.
D'un autre côté, nous pouvons lier un URL dans une nouvelle fenêtre :
Et si vous utilisiez le
<A HREF="http://www.mcli.dist.maricopa.edu/tut/"
onClick="window.open('http://www.mcli.dist.maricopa.edu/tut/',
'myWin', 'toolbar=yes, directories=no, location=no, status=yes, menubar=no,
resizable=yes, scrollbars=yes, width=500, height=400'); return false"
>meilleur didacticiel web de l'univers</a> gratuitement !
Ce code affiche les boutons de navigation (mais pas ceux de répertoires) et le champ d'adresse. La nouvelle fenêtre a une taille de 500 pixels de large et de 400 pixels de haut, nous permettons au visiteur d'en modifier la taille et les barres de défilement seront actives.
Vous pouvez écrire ces options de manière plus compacte en listant uniquement celles que vous voulez activer ; le navigateur suppose que celles que vous ne mentionnez pas sont désactivées. Par exemple, voici les alternatives des deux exemples ci-dessus :
Vous pouvez jeter un coup d'oeil à
<A HREF="myimage.gif"
onClick="window.open('myimage.gif', 'myWin',
'status, width=300, height=200'); return false">ma photo</a>
Et si vous utilisiez le meilleur
<A HREF="http://www.mcli.dist.maricopa.edu/tut/"
onClick="window.open('http://www.mcli.dist.maricopa.edu/tut/','myWin',
'toolbar,status,resizable,scrollbars,width=500,height=400');
return false">
didacticiel web de l'univers</a> gratuitement !
Avec les versions 4.0 (et ultérieures) des navigateurs Netscape et Internet Explorer, nous pouvons également, grâce à JavaScript, spécifier l'endroit de l'écran où la fenêtre doit s'ouvrir. Ces dimensions sont données en pixels, mesurées horizontalement et verticalement depuis le coin en haut à gauche de l'écran. Les navigateurs de versions antérieures ignoreront tout simplement ces options.
Malheureusement, Netscape et Internet Explorer utilisent différents noms pour ces options ! Donc, pour activer cette option dans les deux navigateurs, vous devez spécifier ces paramètres deux fois :
Si on l'ajoute à notre exemple précédent, ce code indiquera aux navigateurs de versions 4.0 de placer la fenêtre à 100 pixels à droite et 75 pixels sous le coin supérieur gauche de l'écran du visiteur :
Vous pouvez jeter un coup d'oeil à
<A HREF="myimage.gif"
onClick="window.open('myimage.gif', 'myWin',
'status, width=300, height=200, screenX=100,screenY=75,left=100,top=75');
return false">ma photo</a>.
Nous allons bientôt passer à notre exemple web Volcan pour créer des ouvertures de fenêtres personnalisées. Jusqu'à maintenant, nous avons écrit des petits morceaux de code JavaScript que nous avons ajouté aux tags hyperliens ou inclus dans le corps d'une page pour afficher du contenu dynamique. Si on désire ouvrir plusieurs fenêtres afin d'afficher une série d'images, il est judicieux d'écrire une portion de code JavaScript générique pour effectuer cette tâche, et tout ce que nous avons à faire est de lui indiquer quelle image charger. C'est l'objet d'une fonction JavaScript, un bloc de code que nous pouvons réutiliser autant que nécessaire pour réaliser un même travail.
L'endroit idéal pour écrire des fonctions JavaScript est dans la partie invisible de notre document entre les tags <HEAD>...</HEAD>. De cette manière, nous pouvons charger le "cerveau' de notre JavaScript dans les navigateurs web et l'appeler ensuite quand nous en avons besoin dans notre document.
Pour notre site Web Volcan, nous allons modifier la page parlant des Volcans aux USA. Nous avons un lien depuis une petite image de sismomètre qui affiche une version plus grande de cette image dans une fenêtre web séparée (en utilisant l'attribut TARGET du tag hyperlien). Nous allons ajouter quelques liens à ce document pour afficher des images d'autres paysages volcaniques, et utiliser le JavaScript pour charger ces images dans une nouvelle fenêtre.
Mais plutôt que charger seulement une image dans une fenêtre, nous allons dire au JavaScript, "Voici le fichier image, un titre et une légende ; Crée, s'il te plait, une nouvelle fenêtre web avec l'image à l'intérieur et place la légende au bas de la page". Nous allons donc utiliser JavaScript pour créer la nouvelle fenêtre puis écrire le contenu dynamique de cette fenêtre depuis un modèle. Nous voulons créer cette capacité dans une fonction afin de pouvoir l'utiliser pour 4 images différentes.
<head> <title>Endroits Volcaniques aux USA</title>et
</head>ajoutez cette fonction JavaScript :
<SCRIPT LANGUAGE="JavaScript">
<!-- début de masquage pour les anciens navigateurs
// Ce script ouvre une nouvelle fenêtre de navigateur et écrit
// du code HTML affichant une image avec un titre et une légende
function show_photo( pFileName, pTitle, pCaption) {
// spécifie les paramètres de la fenêtre
photoWin = window.open( "", "photo",
"width=600,height=450,status,scrollbars,resizable,
screenX=20,screenY=40,left=20,top=40");
// écrit le contenu dans la fenêtre
photoWin.document.write('<html><head><title>' +
pTitle + '</title></head>');
photoWin.document.write('<BODY BGCOLOR=#000000 TEXT=#FFFFCC
LINK=#33CCFF VLINK=#FF6666>');
photoWin.document.write('<center>');
photoWin.document.write('<font size=+3
face="arial,helvetica"><b>' +
pCaption + '</b></font><br>');
photoWin.document.write('<img src="' +
pFileName + '"><p>');
photoWin.document.write('<font face=
"arial,helvetica">');
photoWin.document.write( '"' + pTitle +
'" photo © Lorrie Lava<br>');
photoWin.document.write('<A HREF="mailto:
lava@pele.bigu.edu">
lava@pele.bigu.edu</A><br>');
photoWin.document.write('Etudes Volcaniques,
<A HREF="http://www.bigu.edu/">
Big University</A>');
photoWin.document.write('<p></font>
</body></html>');
photoWin.document.close();
// Si nous travaillons avec Netscape, nous pouvons amener la fenêtre à l'avant-plan
if (navigator.appName.substring(0,8) ==
"Netscape") photoWin.focus();
}
// Fin de masquage pour les vieux navigateurs -->
</SCRIPT>
Si vous voulez copier et coller ce code, utilisez cet exemple de HTML qui se chargera dans une nouvelle fenêtre de navigateur.
Notre fonction s'appelle show_photo ; quand nous l'utilisons dans nos pages, nous lui envoyons trois informations que sont les variables pFileName (l'URL du fichier image), pTitle (une chaine de texte pour le titre de la page web que nous allons créer via JavaScript) et pCaption (une courte légende à afficher sous l'image). Ces trois éléments peuvent être différents chaque fois que nous les utilisons mais ils sont représentés dans notre fonction par leurs noms de variables.
Nous utilisons ensuite la fonction window.open pour créer une fenêtre de 600 pixels de large par 400 pixels de haut ; notez que, au contraire de nos exemples précédents, le premier paramètre de cette fonction, l'URL de la fenêtre, est vide. C'est parce que la page qui s'affichera dans la fenêtre n'existe pas. En fait, nous allons utiliser la fonction document.write dans les lignes suivantes pour écrire tout le contenu de cette page. En utilisant la notation photoWin.document.write, nous indiquons au navigateur web d'écrire le contenu de la nouvelle fenêtre en utilisant le modèle fourni. Notez que, près de la fin, nous précisons au navigateur que nous avons fini grâce au code photoWin.document.close();
La dernière partie est un code spécial qui permet à la fonction, si elle est utilisée dans les navigateurs Netscape, d'amener la fenêtre en avant-plan (cette fonction n'est pas encore disponible dans Internet Explorer).
Jusqu'à maintenant, nous avons seulement créé l'ouverture de fenêtre. Nous allons maintenant ajouter le code qui "appelle" la fonction :
<a href="../pictures/seismo.jpg" target="photo">par ce nouveau code :
<a href="'../pictures/seismo.jpg"
onClick="show_photo('../pictures/seismo.jpg', 'Sismomètre',
'Table Volcanique, Long Valley, Californie'); return false"
onMouseOver="window.status='voir une grande image d\'un sismomètre';
return true">
NOTE : Nous utilisons l'évènement onClick pour déclencher un appel à notre fonction JavaScript. L'image à charger dans la nouvelle fenêtre est seismo.jpg, le titre de la nouvelle page est Sismomètre et la légende à placer en bas est Table Volcanique, Long Valley, Californie. Si notre fonction marche, elle génèrera une page web dans une nouvelle fenêtre contenant cette information dans le format précisé dans notre fonction.
Nous utilisons également l'évènement onMouseOver pour contrôler l'affichage dans la barre d'état quand l'internaute déplace sa souris sur ce lien (voir la leçon 27a)
Quand on clique, soit sur l'image onglet du sismomètre, soit sur le lien hypertexte en dessous, une nouvelle fenêtre web apparaît et l'image taille réelle s'affiche dans une page sur fond noir avec du texte jaune (vous devrez peut-être faire défiler la fenêtre vers le bas pour voir la légende). Si ça ne marche pas, comparez-la avec la page web exemple de cette partie de la leçon.
Nous allons maintenant démontrer l'utilité d'écrire des fonctions JavaScript -- en utilisant le même code pour différents contenus. Dans les précédentes versions du document sur lequel nous avons travaillé, usa.html, le lien listé sous le Mont St Helens nous emmenait vers une autre page web, msh.html, contenant une seule phrase et un lien vers une image. Nous n'allons plus utiliser cette seconde page web mais, à la place, nous allons modifier notre première page pour afficher l'image dans une nouvelle fenêtre.
<td valign=top>Le 18 Mai 1980, après une longue période de repos, cette paisible montagne de l'état de Washington a fourni <a href="msh.html">des observations détaillées</a> sur le mécanisme d'éruptions hautement explosives. </td>par :
<td valign=top>Le 18 Mai 1980, après une longue pÈriode de repos,
cette paisible montagne de l'état de Washington a fourni des observations détaillées sur le mÈcanisme
d'éruptions hautement explosives.
Les immenses pins de cette montagne jadis paisible ressemblaient à <a href="../pictures/msh.gif"
onClick="show_photo('../pictures/msh.gif', 'Arbres Dévastés',
'Zone d'éruption du Mont St. Helens'); return false"
onMouseOver="window.status='voir une photo montrant la force de l`\'éruption';
return true"> des cure-dents</a>.
</td>
NOTE : Nous utilisons la fonction JavaScript que nous avons écrite pour le lien vers l'image du sismomètre pour afficher une légende et un titre différents pour une autre image, celle du Mont St. Helens.
Mais on ne va pas s'arrêter là ! Nous allons ajouter deux autres sections à ce document et utiliser notre fonction JavaScript pour afficher deux nouvelles images de volcans.
<tr>
<td>
<font size=+1><B>
Le Pic de San Francisco
</B></font>
</td>
<td colspan=2>
<font size=+1><B>
Le Cratère MacDougal
</B></font>
</td>
</tr>
<tr>
<td valign=top>Les scientifiques pensent qu'il y a plusieurs millions d'années,
les éruptions volcaniques qui ont modelées
<a href="../pictures/agassiz.jpg"
onClick="show_photo('../pictures/agassiz.jpg', 'Mont Agassiz',
'Le Pic de San Francisco, Arizona'); return false"
onMouseOver="window.status='voir une image d\'un volcan en Arizona';
return true">cette montagne dans le nord de l'Arizona</a>
étaient très semblables à celles observées au Mont St. Helens.
</td>
<td valign=top colspan=2>
Quand le magma volcanique en ébullition rencontre l'eau,
ces éruptions explosives peuvent former
<a href="../pictures/macdougal.jpg"
onClick="show_photo('../pictures/macdougal.jpg', 'Le Cratère MacDougal',
'Région Volcanique du Pincate, Mexique'); return false"
onMouseOver="window.status='voir une image d\'un cratère volcanique au Mexique'; return true">de profonds cratères</a> découverts au sud de l'Arizona
dans la région volcanique du Pincate au Mexique.
</td>
</tr>
Ci-dessous, nous avons listé des endroits aux Etats-Unis considérés comme des zones volcaniques "actives".(retirez le mot "deux")
Si tout va bien, vous avez quatre liens différents faisant appel à la même fonction JavaScript et générant des contenus différents !
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Souvenez-vous que le JavaScript est très sensible aux fautes de frappe -- un guillemet ou un point-virgule manquants peuvent détruire votre page ! Vérifiez que vous n'avez pas de caractères RETOUR CHARIOT supplémentaires dans vos commandes JavaScript.
Revoyons les grandes lignes de cette leçon :
Utilisez l'ouverture de fenêtres personnalisées dans vos propres pages web. Essayer de modifier le format de votre HTML pour qu'il s'écrive de manière dynamique.
Pour quelles raisons voudriez-vous utiliser une petite fenêtre s'ouvrant dans votre site ? Pourrait-elle être utilisée comme barre de Navigation ?
Voici notre dernière dose de JavaScript... Permuter des images en réponse à des actions de l'utilisateur...
Ecrire le HTML : Leçon 27c : Une 'tite Dose de JavaScript : Ouvertures de Fenêtres
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut27c.html