Suivez-nous sur X
|
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z,
ALL
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
A propos d'Obligement
|
|
David Brunet
|
|
|
|
Programmation : JavaScript - Gestion des fenêtres
(Article écrit par Guillaume Guittenit et extrait de lesdocs.fr/amiga - juin 2017)
|
|
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 trois 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
- Le bouton "ouvrir fenêtre" de 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.
- 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).
- Le bouton "fermer fenêtre" de la page menu.html ferme la variable fenêtre créée.
- 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 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 contextuelle (pop-up)
Dans le code qui suit, une fenêtre, référencée par la variable "fen", apparaît 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 contextuelle s'ouvre avec une résolution de
400x400 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 trois paires d'images, comprenant
trois vignettes (par exemple de 150 pixels de large) et trois 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.
Soutenez le travail de l'auteur
|
|
|
