Gestion des fenêtres en JavaScript
Grâce à la fonction window.open(), il est possible de créer de nouvelles fenêtres, de contrôler leurs tailles, leurs positions, leurs aspects, et de les refermer de manière dynamique.
Ouverture d'une page ou d'un lien dans un nouvel onglet
La première utilité de la fonction window.open() est qu'elle permet d'ouvrir un lien dans un nouvel onglet grâce au paramètre _blank, contrairement à location.href qui remplace le contenu de la fenêtre actuelle par un autre :
location.href = 'nouvellepage.html' // charge la nouvelle page dans l'onglet actuel
window.open('nouvellepage.html', '_blank'); // ouvre la nouvelle page dans un nouvel onglet
Le code ci-dessous, scindé en 3 pages, illustre toutes les possibilités de window.open() :
menu.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Contrôle des fenêtres</title>
<script>
function ouvrir() {
fen = window.open("page1.html", "fenetre2", "width=500,height=500,top=150,left=150,toolbar=no,location=no,menubar=no");
}
</script>
</head>
<body>
<input type="button" value="ouvrir petite fenêtre" onclick="ouvrir();">
<input type="button" value="fermer fenêtre" onclick="fen.close();">
<input type="button" value="ouvrir nouvel onglet" onclick="window.open('page1.html')">
<p><a href="page2.html" target="fenetre2">Ouvrir la deuxième page</a></p>
</body>
</html>
page1.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Page 1</title>
</head>
<body>
<p>Ceci est la page n° 1</p>
</body>
</html>
page2.html
<!DOCTYPE html>
<html lang="fr">
<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 :
- Le bouton ouvrir fenêtre du la page menu.html déclenche la création d’une nouvelle fenêtre de 500 pixels contenant 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.
- Le bouton fermer fenêtre de la page menu.html ferme la variable fenêtre créée.
- Le bouton ouvrir nouvel onglet ouvre la page1.html dans un nouvel onglet du navigateur. Il suffit d'utiliser la fonction window.open() sans option particulière. Cela est équivalent à un lien avec l'attribut target="_blank"
- Le lien de la page menu.html permet de changer l’URL courante dans la deuxième fenêtre.
- Le bouton de page2.html ferme la fenêtre courante.
Options 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.
- top : distance en pixels depuis le haut de l'écran.
- left : distance en pixels depuis la gauche de l'écran.
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 lang="fr">
<head>
<meta charset="utf-8">
<title>Galerie et fenêtres</title>
<script>
function ouvrir(numero) {
const fen = window.open("", "paysage", "width=400,height=400,toolbar=no,scrollbars=no,status=no");
fen.document.write("<!DOCTYPE html><html><head><title>Zoom</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='image" + numero + ".jpg'></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>
Pour que le code fonctionne, prévoir 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.