Obligement - L'Amiga au maximum

Jeudi 13 décembre 2018 - 05:26  

Translate

En De Nl Nl
Es Pt It Nl


Rubriques

 · Accueil
 · A Propos
 · Articles
 · Galeries
 · Glossaire
 · Liens
 · Liste jeux Amiga
 · Quizz
 · Téléchargements
 · Trucs et astuces


Articles

 · Actualité (récente)
 · Actualité (archive)
 · Comparatifs
 · Dossiers
 · Entrevues
 · Matériel (tests)
 · Matériel (bidouilles)
 · Points de vue
 · En pratique
 · Programmation
 · Reportages
 · Tests de jeux
 · Tests de logiciels
 · Tests de compilations
 · Articles divers

 · Articles in english
 · Articles en d'autres langues


Twitter

Suivez-nous sur Twitter




Liens

 · Sites de téléchargements
 · Associations
 · Pages Personnelles
 · Matériel
 · Réparateurs
 · Revendeurs
 · Presse et médias
 · Programmation
 · Logiciels
 · Jeux
 · Scène démo
 · Divers


Jeux Amiga

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


Trucs et astuces

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


Glossaire

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


Partenaires

Annuaire Amiga

Amedia Computer

Relec

Hit Parade


Contact

David Brunet

Courriel

 


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
  1. 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.

  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 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.


[Retour en haut] / [Retour aux articles]