<< Retour au sommaire

 

 

Les nouvelles fenêtres

 

 

 

Le sommaire :

  1. Introduction.
  2. La méthode « open ».
  3. La méthode « close ».
  4. Un exemple concret.
  5. Un lien vers une nouvelle fenêtre.

 

 

Introduction

 

Dans la fonction évènementielle « OnClick », placée dans un bouton de type « button », nous pouvons demander l’exécution de l’ouverture d’une page dans une nouvelle fenêtre.

La méthode est « window.open ».

 

Pour refermer une fenêtre, la méthode est « self.close ».

 

 

La méthode « open »

 

Cette méthode permet donc d’ouvrir une page dans une nouvelle fenêtre.

Elle appartient à l’objet « window » qui peut être omis lors de l’écriture de la méthode…

 

La syntaxe :

window.open("URL","new","caractéristiques");

 

La description :

 

“URL” est l’adresse URL et le nom de la page WEB à ouvrir dans une nouvelle fenêtre.

“new” spécifie qu’il faut ouvrir la page WEB dans une nouvelle fenêtre.

« caractéristiques » sont les caractéristiques de la fenêtre que nous souhaitons ouvrir, taille, affichage du menu ou non etc.

Elles doivent être séparées par une virgule et vous devez éviter de passer à la ligne.


 

Liste des caractéristiques disponibles

Caractéristiques

Descriptions

Toolbar=yes ou no

Affichage ou non de la barre d’outils.

Location=yes ou no

Affichage ou non du champ « adresse ».

Directories=yes ou no

Affichage ou non des boutons d’accès rapide.

Directories=yes ou no

Affichage ou non de la barre d’état.

Menubar=yes ou no

Affichage ou non du menu déroulant.

Directories=yes ou no

Affichage ou non des barres de défilement.

Resizable=yes ou no

Autoriser ou non que la fenêtre soit redimensionnable.

Width=valeur

Où « valeur » est la largeur en pixel de la fenêtre.

Height=valeur

Où « valeur » est la hauteur en pixel de la fenêtre.

Remarque :

Les valeurs « yes » et « no » peuvent être remplacées par « 1 » ou « 0 ».

 

Voici un exemple qui ouvre la page « bonjour.html » dans une nouvelle fenêtre pour une largeur de 300 pixels et une hauteur de 200 pixels.

 

window.open ("bonjour.html","new","wigth=300,height=200");

 

 

La méthode “close”

 

La méthode “close” permet de refermer la fenêtre dans laquelle elle est utilisée.

 

La syntaxe est relativement simple :

 

self.close ();

 

 


Un exemple concret

 

Ici, nous allons créer une page intitulée « accueil.html » qui affichera un bouton permettant d’ouvrir la page « go.html » dans une nouvelle fenêtre.

 

Cette dernière aura un bouton permettant de refermer la fenêtre afin de ré atterrir dans « accueil.html ».

 

« go.html » lira en streaming le fichier « salut.mp3 ».

Ainsi, on vous souhaitera la bienvenue dans la nouvelle fenêtre…

 

Pour tester les pages :

Essayer les pages de l’exemple >>

 


Voici le code de « accueil.html » :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>bonjour</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <link rel="stylesheet" media="screen" type="text/css" title="MonTitre" href="styles.css" /> 

</head>

<body>

<table>

<tr><td>

Salut !

<br />

Vous êtes prêts pour changer de fenêtre ?

<br />

<!-- Affichage d'un bouton de formulaire -->

<!-- qui va déclencher l'ouverture d'une nouvelle fenêtre -->

<input type="button" value="Feu !" onclick="open('go.html','new','width=300,height=150');" />

<br />

Bon voyage...

</td></tr>

</form>

</table>

</body>

</html>

 

 


Voici le code de « go.html » :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>La nouvelle fenêtre</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <link rel="stylesheet" media="screen" type="text/css" title="MonTitre" href="styles.css" /> 

</head>

<body>

<table>

<caption>

Bienvenue dans la nouvelle page !

</caption>

<!-- exécution du son en streaming -->

<tr><td>

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=salut.mp3&amp;autostart=1" width="200" height="20"><param name="wmode" value="transparent"><param name="movie" value="dewplayer.swf?mp3=salut.mp3&amp;autostart=1" /></object>

</td></tr>

<!-- fermeture de la fenêtre par le biais d'un bouton de formulaire -->

<tr><td>

<form>

<input type="button" value="Tchao !" onclick="self.close();" />

</form>

</td></tr>

</table>

</body>

</html>

 


Un lien vers une nouvelle fenêtre

 

Tout comme le bouton, l’attribut « OnClick » peut permettre à un lien de déclencher l’ouverture d’une page dans une nouvelle fenêtre.

 

Cependant, avec une petite particularité, la valeur de l’attribut « Href » ne devra pas préciser le nom de la page. Il faudra donc écrire un « # » dièse.

(ALT GR +3 du pavé alphanumérique ;=

 

Voici un exemple :

 

La page « index.html » ouvre la page « avertissement.html » dans une nouvelle fenêtre.

 

Pour voir l’exemple ?

Pas de problème, cliquez ici >>

 


Voici le code de la page « index.html » :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Page d'accueil</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<h1>Bienvenue l'ami</h1>

<p>

Nous étudions l'ouverture d'une page dans une nouvelle fenêtre.

</p>

<p>

Voici un lien qui va ouvrir une nouvelle fenêtre, bon voyage !

</p>

<p>

<a href="#" OnClick="open('avertissement.html','new','width=300,height=150');">

Cliquez ici pour décoler !

</a></p>

</body>

</html>

 

 


Voici le code de la page « avertissement.html » :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Bravo !</title>

<bgsound src="avion.wav" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<p>

Super, mission réussie...</p>

<p>Maintenant il faut repartir !</p>

<p>

<a href="#" OnClick="self.close();">

Je veux refermer cette fenêtre j'en ai marre !

</a></p>

</body>

</html>

 

Télécharger les 2 exemples >>

 

Philippe BOULANGER