Comment ouvrir une fenêtre en javascript ?

1- La méthode open

Pour ouvrir une fenêtre en javascript, on utilise la méthode (fonction) open() de l'objet window.

window.open( [url] [,nom] [,propriétés])

La méthode open() possède donc 3 paramètres :

ParamètreDescription
urlAdresse de la page à ouvrir dans la fenêtre.
nomNom de la fenêtre, qui pourra être utilisé en temps que "target" depuis les autres pages html.
propriétésPropriétés de la fenêtre (hauteur, largeur, etc..).

2- Les propriétés de la fenêtre

Les caractéristiques de la fenêtre sont définies à l'aide de différentes propriétés :

PropriétéDescriptionValeurs
directoriesAfficher la barre des liens.yes, no
heightHauteur de la fenêtre.taille en pixels
locationAfficher la barre d'adresse.yes, no
menubarAfficher la barre de menu.yes, no
resizablePossibilité de redimentionner la fenêtre.yes, no
scrollbarsAfficher les barres de défilement.yes, no
statusAfficher la barre de status. yes, no
toolbarAfficher la barre d'outils.yes, no
widthLargeur de la fenêtre.taille en pixels

3- Fermer une fenêtre

Pour fermer une fenêtre, on utiliser la méthode close().

window.close()

4- Exemple

Voici un exemple permettant d'ouvrir et fermer une fenêtre.

Fichier de base, index.php :

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function OuvrirFenetre(url,nom,details) {
  5.  window.open(url,nom,details)
  6. }
  7. </script>
  8. </head>
  9. <body>
  10. <p><a href="javascript:OuvrirFenetre('popup.php?refer=index.php','popup','width=300,height=250')">ouvrir
  11. popup</a></p>
  12. <p><a href="index2.php">page suivante</a></p>
  13. </body>
  14. </html>

Fichier fenêtre, popup.php :

  1. <html>
  2. <body onload="window.focus();">
  3. <p><b>refer :</b> <?php echo $_GET['refer']; ?></p>
  4. <p><a href="javascript:window.close();">Fermer la fenetre</a></p>
  5. </body>
  6. </html>

Deuxième page, index2.php :

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function OuvrirFenetre(url,nom,details) {
  5.  window.open(url,nom,details)
  6. }
  7. </script>
  8. </head>
  9. <body>
  10. <p><a href="javascript:OuvrirFenetre('popup.php?refer=index2.php','popup','width=300,height=250')">ouvrir
  11. popup</a></p>
  12. <p><a href="index.php">page pr&eacute;c&eacute;dente</a></p>
  13. </body>
  14. </html>