Comment ouvrir de petites fenêtres (« popup ») avec des dimensions ajustables ?

Introduction

Tout repose sur la fonction javascript window.open() qui a 3 arguments, tous trois des chaînes de caractères ou des variables javascript contenant des chaînes de caractères, successivement :

1. le fichier à charger dans la fenêtre,
2. le nom de cette fenêtre, sous lequel cette fenêtre sera ultérieurement reconnue par le système (et qu'on pourra utiliser par la suite dans les TARGET pour charger d'autres pages dans la fenêtre)
3. les paramètres définissant les dimensions de la fenêtre, sa position sur l'écran et ses différents attributs.

Comment appeler le script d'ouverture ?

<SCRIPT langage="Javascript">
  function ouvre(fichier) {
  ff=window.open(fichier,"popup",
               "width=250,height=150,left=30,top=20") }
  </SCRIPT>

On peut mettre d'autres attributs dans la chaine des paramètres ; on en verra quelques uns plus loin. Attention : tous ces attributs ne doivent être séparés que par des virgules (ne pas introduire d'espace!)

 <A HREF="javascript:ouvre('fichier.html')">cliquez ici</A> 

<A HREF=" " 
 onClick="ouvre('fichier.html');return false">cliquez ici</A>

<A HREF="fichier.html" TARGET="popup" 
onClick="ouvre('fichier.html');return false">cliquez ici</A>

<SCRIPT langage="Javascript">
  function ouvrir(fichier,fenetre) {
  ff=window.open(fichier,fenetre,"width=250,etc...") }
</SCRIPT>  

<A HREF="fichier.html" TARGET="popup" 
onClick="ouvrir(this.href,this.target);return false">cliquez ici</A>

Ces bonnes résolutions étant dûment notées, il faut insister que la suite va concerner l'apparence de ces popups et qu'il sera indispensable d'avoir son javascript actif pour en juger.

Les différentes options possibles

<SCRIPT>
  function ouvre2(fichier) {
  ff=window.open(fichier,"popup2",
     "width=250,height=150,left=320,top=20,scrollbars=yes"
   +",resizable=yes,menubar=yes,status=yes") }
</SCRIPT>

Pour voir la différence avec notre premier script, cliquez ici : vous allez ouvrir les deux popups en même temps, l'ancien à gauche et le nouveau à droite. Passez notamment sur la 2ème page ("longue") ; l'ascenseur vertical devrait apparaître dans tous les cas.

Une fenêtre plein écran ?

<SCRIPT>
  function ouvre_plein_ecran(fichier) {
  ff=window.open(fichier,"pop","fullscreen=yes"}
</SCRIPT>

Attention au « focus »

              ff.focus()

Comment refermer ces fenêtres ?

Le visiteur a toujours à sa disposition la case de fermeture de toute fenêtre, mais on peut aussi lui fournir un bouton plus accrocheur ou même rendre cette fermeture automatique — mais cette dernière ne fonctionne hélas pas toujours très bien :-((

Comment passer les dimensions en paramètres ?

<SCRIPT>
  function ouvre3(fichier,w,h) {
     ff=window.open(fichier,"popup","width="+w
        +",height="+h+",left=10,top=10,scrollbars=no") }
</SCRIPT>

IE5-windows   : 8px vers la droite, 8px vers le bas
IE5-mac         : aucun décalage
NN4.7-windows : 10px et 15px 
NN4.7-mac     : 8px et 8px 
iCab (mac)     : 8px et 8px, etc...

Les marges qui apparaissent sont remplies avec la couleur de fond par défaut du visiteur, imprévisible... Bref, on ne peut pas avoir de solution satisfaisante avec une technique aussi simple; mais il est toutefois possible d'améliorer le script pour pallier ces difficultés.

Redimensionnement dynamique des fenêtres

Avec les scripts précédents, on prendra garde à refermer le popup avant de le rappeler avec des dimensions différentes (sinon, ces nouvelles dimensions ne sont pas prises en compte et le 2ème appel recharge la fenêtre initiale). Essayez avec deux images, l'une en 252x131 et l'autre en 188x257. Cela donnerait évidemment de l'intérêt aux techniques d'autofermeture des fenêtres si celles-ci étaient fiables, ce qui n'est malheureusement pas le cas... Nous allons maintenant voir une autre technique susceptible de recaler nos dimensions, hélas elle aussi avec de sérieuses difficultés.

On devrait pouvoir recadrer la fenêtre aux dimensions w x h en plaçant la ligne window.resizeTo(w,h) dans le script. Comme cette fonction n'existe que dans le javascript 1.2, son appel provoquera un message d'erreur avec les navigateurs anciens (versions "3" et en dessous), mais sans plus de conséquences dommageables.

function ouvre4(fichier,w,h) {		
ff=window.open(fichier,"pop","left=10,top=10");			
if(ff) { ff.focus() ; ff.resizeTo(w,h)  }
	} 

Communications entre la fenêtre mère et la fenêtre fille

Dans le sens mère–fille, la fenêtre fille (le popup) est considérée comme un cadre. Tout lien avec le nom du popup en TARGET (c.à.d. en cadre cible) provoquera le chargement de la nouvelle page dans le popup.

<A HREF="page22.html" TARGET="principal">clic</a>

<a href="#" 
  onClick="opener.location='page22.html'; return false">vers
  la page 22</a>

Cette propriété opener peut aussi servir à donner un nom à la fenêtre mère quand celle-ci n'est pas issue d'un frameset, afin d'employer ensuite la syntaxe HTML classique pour les liens.

Cliquez ici pour une démonstration de cette propriété opener.

Charles