Gestion des fenĂȘtres

Il est possible de crĂ©er de nouvelles fenĂȘtres, de contrĂŽler leur aspect et de les refermer de maniĂšre dynamique. Le code ci-dessous, scindĂ© en 3 pages, illustre ces possibilitĂ©s.

menu.html

<!DOCTYPE html>
	<head>
		<script>
		function ouvrir() {
			fen=window.open("page1.html","fenetre2","toolbar=no,location=no,menubar=no");
		}
		</script>
	</head>
	<body>
		<input type="button" value="ouvrir fenĂȘtre" onclick="ouvrir();">
		<input type="button" value="fermer fenĂȘtre" onclick="fen.close();">
		<p><a href="page2.html" target="fenetre2">Ouvrir la deuxiĂšme page</a></p>
	</body>
</html>

page1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Page 1</title>
	</head>
	<body>
		<p>Ceci est la page n° 1</p>
		<input type="button" value="fenĂȘtre parente" onclick="alert(opener.document.location);">
	</body>
</html>

page2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Page 2</title>
	</head>
	<body>
		<p>Ceci est la page n° 2</p>
		<input type="button" value="fermer" onclick="window.close();">
	</body>
</html>

Explications :

  1. Le bouton ouvrir fenĂȘtre du la page menu.html dĂ©clenche la crĂ©ation d’une nouvelle fenĂȘtre affichant page1.html. Cette fenĂȘtre est rĂ©fĂ©rencĂ©e par la variable fen. Son nom interne en tant que cible est fenetre2. Ce nom peut ĂȘtre utilisĂ© dans l’attribut target d’une balise <a> ou <form>. Cette fenĂȘtre ne possĂšde ni barre de menus, ni barre d’outils ni champ d’affichage de l’URL en cours.
  2. Le bouton fenĂȘtre parente de page1.html affiche l’URL de la page affichĂ©e par la fenĂȘtre qui a crĂ©Ă© fenetre2 (menu.html). La propriĂ©tĂ© opener d’une fenĂȘtre est une rĂ©fĂ©rence vers celle qui l’a ouverte (il s’agit donc d’un objet de type window).
  3. Le bouton fermer fenĂȘtre de la page menu.html ferme la variable fenĂȘtre crĂ©Ă©e.
  4. Le lien de la page menu.html permet de changer l’URL courante dans la deuxiĂšme fenĂȘtre.
  5. Le bouton de page2.html ferme la fenĂȘtre courante.

Options d’ouverture possibles des fenĂȘtres :

  • toolbar (yes, no): active ou dĂ©sactive la barre d’outils du navigateur
  • location (yes, no) : active ou dĂ©sactive la barre d’adresses. Si elle est dĂ©sactivĂ©e, elle n’est pas masquĂ©e, mais la saisie est impossible.
  • directories (yes, no) : active ou dĂ©sactive la barre des dossiers du navigateur.
  • status (yes, no) : active ou dĂ©sactive la barre d’état du navigateur, en bas de la fenĂȘtre.
  • menubar (yes, no) : active ou dĂ©sactive la barre de menu du navigateur.
  • scrollbars (yes, no) : active ou dĂ©sactive les barres de dĂ©filement du navigateur.
  • resizable (yes, no) : active ou dĂ©sactive le redimensionnement de la fenĂȘtre. Cette option contraignante est dĂ©sormais dĂ©sactivĂ©e par les navigateurs.
  • width : largeur de la fenĂȘtre en pixels.
  • height : hauteur de la fenĂȘtre en pixels.

Galerie d’images avec Ă©criture de code HTML et JavaScript dans une fenĂȘtre Pop-up

Dans le code qui suit, une fenĂȘtre, rĂ©fĂ©rencĂ©e par la variable fen, apparait aprĂšs un clic sur une petite image. Une fois la fenĂȘtre ouverte, on y insĂšre du code HTML et JavaScript grĂące aux commandes fen.document.write. Le code insĂ©rĂ© permet de dĂ©tecter les dimensions de la grande image, d'attendre son chargement, puis d’adapter la taille de la fenĂȘtre Ă  la taille de l’image. Au dĂ©part, la fenĂȘtre pop-up s’ouvre avec une rĂ©solution de 400 x 400 pixels, puis se retaille en fonction de la taille de l’image contenue.

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<script>
	function ouvrir(numero) {
		nomimage="image"+numero+".jpg";
		fen=window.open("","paysage","width=400,height=400,toolbar=no,scrollbars=no,status=no");	
		fen.document.write("<!DOCTYPE html><head><title>"+nomimage+"</title></head>");
		fen.document.write("<script>function controletaille() {");
		fen.document.write("if (document.images[0].complete) {");
		fen.document.write("window.resizeTo(document.images[0].width+9,document.images[0].height+27);");
		fen.document.write("window.focus(); }");
		fen.document.write("else setTimeout('controletaille()',250) }</"+"script>");
		fen.document.write("<body onload='controletaille();' style='margin:0'>");
		fen.document.write("<img src='"+nomimage+"'></body></html>");
		fen.window.focus();
		fen.document.close();
	}
	</script>
	</head>
	<body>
		<img src="vignette1.jpg" style="cursor:pointer" onclick="ouvrir(1);">
		<img src="vignette2.jpg" style="cursor:pointer" onclick="ouvrir(2);">
		<img src="vignette3.jpg" style="cursor:pointer" onclick="ouvrir(3);">
	</body>
</html>

Remarque : Pour que le code ci-dessus fonctionne, il vous faut 3 paires d'images, comprenant 3 vignettes (par exemple de 150 pixels de large) et 3 grandes images (par exemple de 700 pixels de large). Les vignettes s'appelleront : vignette1.jpg, vignette2.jpg et vignette3.jpg et les grandes images : image1.jpg, image2.jpg et image3.jpg.

Articles connexes