Gestion des fenêtres

JavaScript publié le 3 Juin 2017 mis à jour le 13 Déc 2022

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) {
		let nomimage = "image" + numero + ".jpg";
		const 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.