Ouvrir une nouvelle fenêtre

Auteur de l'article : Baptiste Dumouchel

L'ouverture de nouvelles fenêtres sur un site permet de ne pas quitter la page principale tout en offrant de nouvelle options de naviguation. Commençons par l'ouverture toute simple d'une nouvelle fenêtre du navigateur. Celle-ci repose sur une commande basique de Javascript, la commande window.open, suivie de l'url entre parenthèses. Ainsi, vous chargez le contenu d'une page web à l'intérieur de cette fenêtre fraîchement créée. En voici un exemple :

<script type="text/javascript">
window.open("http://www.pcastuces.com");
</script>

Ce type de fenêtre s'ouvrira automatiquement lors du chargement de votre page principale, d'où le terme "pop-up".
Vous pouvez rajouter un paramètre après l'url servant à nommer la fenêtre afin de charger une nouvelle page web dans celle-ci :

<script type="text/javascript">
window.open("http://www.pcastuces.com", "pcastuces");
</script>

Si vous le souhaitez, vous pouvez initialiser la position de la fenêtre sur l'écran grâce aux paramètres "screenX" et "screenY" pour Netscape, "left" et "top" pour Internet Explorer, modifier sa largeur ("width") et sa hauteur("height") et même autoriser ou non la redimension de la fenêtre par l'utilisateur ("resizable") :

<script type="text/javascript">
window.open("http://www.pcastuces.com", "pcastuces", "top=50, left=100, screenY=50, screenX=100, width=300, height=300, resizable=no");
</script>

La fenêtre affichée sera un carré non redimensionnable de 300 pixels de côté dont les coordonnées du point en haut à gauche seront (100;50).
Si vous ne connaissez pas la résolution d'écran de l'utilisateur, il est possible de créer une fonction simple qui vous permettra d'affichez la fenêtre à une taille proportionnelle à celle de la fenêtre principale :

<script type="text/javascript">
dimensions="width="+(screen.width/3)+",height="+(screen.width/3)+",top=50,left=100,screenY=50, screenX=100, resizable=no";
window.open("http://www.pcastuces.com", "pcastuces", "dimensions");
</script>

Vous pouvez maintenant créer des fenêtres plus petites en changeant à votre grés le dénominateur ou en faisant une simple soustraction. Néanmoins, nous vous conseillons de fixer les dimensions.
Voici maintenant une suite de paramètres que vous pouvez associer à la variable précédente, c'est-à-dire "dimensions". Ils peuvent prendre les valeurs "yes" ou "no" (visible ou non). Par défaut ces paramètres sont à "no".

toolbar :	barre d'outils
scrollbars :	barres de défilement (attention si la page web est trop grande !)
status :	barre d'état (barre inférieure)
location :	barre d'adresse
menubar :	barre de menu
directories :	menu des favoris

Il existe d'autres paramètres mais ceux-ci sont peu utilisés (hotkeys, dependent,...). Vous pouvez aussi faire afficher la fenêtre grâce à un lien. Pour cela, il suffit de créer une fonction et de l'affecter au lien :

<script type="text/javascript">
function fenetre()
{
dimensions="width=300,height=300,top=50,left=100,screenY=50, screenX=100, resizable=no";
window.open("http://www.pcastuces.com","pcastuces","dimensions,scrollbars=yes,location=yes");
}
</script>
<a href="javascript:fenetre();">Cliquez ici pour tester !</a>

Cliquez ici pour tester !

A vous maintenant de faire des tests pour voir quel format vous préférez.