| Javascript
 |
Propriétés et méthodes de l'objet window
Certaines propriétés et méthodes de l'objet
window ne vous sont pas inconnues :
- celles des boites de dialogue. Soit
alert(),
confirm(),
et prompt(),
- et celles du ou des minuteries. Soit
setTimeout()
et clearTimeout().
Une autre série, ayant trait aux frames,
fait l'objet d'un chapitre consacré à ce sujet :
- ce sont frames[], length, parent , opener et top.
Une série a trait à la barre d'état qui est
abordée ci-après :
- ce sont status et defaultStatus.
Une série pour l'ouverture et la fermeture
d'une fenêtre :
- ce sont open() et close().
Et enfin
self qui renvoie à la fenêtre en
cours.
|
|
Utilisation de la barre d'état
Avec Javascript, la barre d'état (petite
bande située au bas de la fenêtre du browser et qui vous informe sur
l'état des transferts et des connections) peut être utilisée pour
afficher des messages de votre cru. Comme je suis myope comme une
taupe, ce n'est pas ma partie préférée du Javascript mais c'est une
opinion des plus subjective.
Les propriétés mises en oeuvre sont :
|
Propriété |
Description |
| status |
valeur du texte affiché dans la barre d'état de la fenêtre. |
| defaultStatus |
valeur par défaut qui s'affiche dans la barre d'état. |
Généralement, cet événement est mis en
oeuvre par un onmouseOver() sur un lien hypertexte.
En voici un exemple :
<HTML>
<BODY>
<A HREF="#" onmouseover="self.status='Votre
texte'; return true;"> A voir ici
</A>
</BODY>
</HTML>
A voir ici
(simple survol)
Il est indispensable d'ajouter return true;
|
|
Ouverture et fermeture de fenêtres
(théorie)
Les méthodes mises en oeuvre sont :
|
Méthodes |
Description |
| open() |
ouvre une nouvelle fenêtre. |
| close() |
ferme la fenêtre en cours. |
La syntaxe est :
[window.]open("URL","nom_de_la_fenêtre","caractéristiques_de_la
fenêtre")
où URL est l'URL de la page que l'on
désire afficher dans la nouvelle fenêtre. Si on ne désire pas
afficher un fichier htm existant, on mettra simplement ''".
où caractéristiques_de_la _fenêtre
est une liste de certaines ou de toutes les caractéristiques de
fenêtre suivantes que l'on note à la suite, séparées par des virgules
et sans espaces ni passage à la ligne.
|
Caractéristique |
Description |
| toolbar=yes ou no |
Affichage de la barre d'outils |
| location=yes ou non |
Affichage de champ d'adresse (ou de localisation) |
| directories=yes ou no |
Affichage des boutons d'accès rapide |
| status=yes ou no |
Affichage de la barre d'état |
| menubar=yes ou no |
Affichage de la barre de menus |
| scrollbars=yes ou no |
Affichage des barres de défilement.
(scrollbars=no fonctionne mal sous Explorer 3.0) |
| resizable=yes ou no |
Dimensions de la fenêtre modifiables |
| width=x en pixels |
Largeur de la fenêtre en pixels |
| height=y en pixels |
Hauteur de la fenêtre en pixels |
On peut aussi utiliser 1 ou 0 au lieu de yes
ou no.
Remarques :
Cette nouvelle fenêtre va s'afficher un peu
n'importe où sur votre écran. Vous ne pouvez pas décider de l'endroit
exact où elle peut apparaître. Cependant sous Netscape 4 c.-à-d. sous
Javascript 1.2 , ce petit "plus" est possible.
Sous Microsoft Explorer 3, l'apparition de
la nouvelle fenêtre se fait après une grimace du browser (il ouvre
temporairement une nouvelle fenêtre du browser).
L'usage des nouvelles fenêtres est assez
sympathique en Javascript pour afficher des informations
complémentaires sans surcharger la page (ou fenêtre) de départ.
Cependant, aussi longtemps que l'utilisateur ne ferme pas ces
nouvelles fenêtres, celles-ci restent ouvertes (lapalissade). Le pire
est lorsqu'on les minimise. Pour peu qu'on utilise souvent cette
technique, le navigateur se retrouve avec plusieurs dizaines de
fenêtres ouvertes ce qui fait désordre, ralentit le système et peut
finir par le planter.
Veillez donc à toujours faire fermer ces
nouvelles fenêtres.
|
|
Ouverture et fermeture de fenêtres
(exemples) |
| |
|
Ouverture par un bouton
(avec code dans le onClick)
Nous allons ouvrir un petite fenêtre qui
affiche le fichier test.htm avec un bouton dans la page.
Fichier test.htm :
<HTML>
<BODY>
<H1>Ceci est un test<HI>
<FORM>
<INPUT TYPE="button" value= " Continuer "
onClick="self.close()">
</FORM>
</BODY>
</HTML>
où self.close() fermera la fenêtre courante, c.-à-d. la
nouvelle fenêtre.
Dans la page de départ :
<FORM>
<INPUT TYPE ="button" value="Ouvrir une nouvelle fenêtre"
onClick="open('test.htm', 'new', 'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')">
(sans espaces ni passage à la ligne)
</FORM>
|
| |
|
Ouverture par un bouton (avec
appel d'une fonction)
Dans la page de départ :
<SCRIPT LANGUAGE="javascript">
<!--
function new_window() {
xyz="open('test.htm', 'new', 'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')"
// sans
espaces ni passage à la ligne
}
// -->
</SCRIPT>
<FORM>
<INPUT TYPE ="button" value="Ouvrir une nouvelle fenêtre"
onClick="new_window()">
</FORM>
|
| |
|
Fermeture automatique après
x secondes
Avec ce script, sans intervention de l'utilisateur, la nouvelle
fenêtre se ferme de façon automatique après 4 secondes. En cliquant
sur le bouton, l'utilisateur interrompt prématurément le compteur et
ferme la fenêtre. Avec ce système, on est certain que le nouvelle
fenêtre sera fermée.
La page test.htm devient testc.htm
<HTML>
<BODY onLoad='compt=setTimeout("self.close();",4000)'>
<H1>Ceci est un test</H1>
<FORM>
<INPUT TYPE="button" value=" Continuer "
onClick="clearTimeout(compt);self.close();">
</FORM>
</BODY>
</HTML>
Dans la page de départ :
<FORM>
<INPUT TYPE ="button" value="Ouvrir une nouvelle fenêtre"
onClick="open('testc.htm', 'new', 'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')">
(sans espaces ni passage à la ligne)
</FORM>
|
| |
|
Ouverture en cliquant sur un lien ou une
image
On ajoute simplement le "onClick=open..." à la balise <A> du lien
ou de l'image.
Dans la page de départ, on a :
<A HREF="#" onClick="open('testc.htm', '', 'width=300,height=150,toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbar=no,resizable=no')">lien de test</A> (sans
espaces ni passage à la ligne)
lien de test
(cliquez)
La fermeture automatique est particulièrement utile ici car si
l'utilisateur clique quand même, la nouvelle fenêtre disparaît
derrière la fenêtre de départ et risque donc de ne pas être fermée.
|
| |
|
Ouverture par survol du lien (Javascript
1.0)
On utilise ici onmouseOver. Pour rappel, Javascript 1.0 donc
compatible Explorer 3.
Dans la page de départ, on a :
<A HREF="#" onmouseOver="open('testc.htm', '', 'width=300,height=150,toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbar=no,resizable=no')">lien de test</A> (sans
espaces ni passage à la ligne)
lien de test
(simple survol)
|
| |
|
Ouverture par survol du lien et
fermeture en quittant le lien (Javascript 1.1)
0n utilise ici onmouseOver et onmouseOut. Pour rappel, onmouseOver
est du Javascript 1.1 et ne fonctionne donc pas sous Explorer 3.0.
Dans la page de départ, on a :
<A HREF="#" onmouseOver="open('test.htm', '', 'width=300,height=150,toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbars=no,resizable=no')" onmouseOut="self.close()">lien de
test</A>
(sans espaces ni passage à la ligne)
Pour la compatibilité avec les lecteurs utilisant Explorer 3.0, il
n'y a pas d'exemple ici.
|
| |
|
Ecrire dans la nouvelle fenêtre
On passe par l'ouverture d'un nouvelle fenêtre par l'appel d'une
fonction.
Dans la page de départ :
<SCRIPT LANGUAGE="Javascript">
<!--
function opnw(){ msg=window.open("","","width=300,height=50,toolbar=no,location=no,directories=no,
status=no,menubar=no,scrollbars=no,resizable=no");
msg.document.write('<HTML> <BODY>' +
'<CENTER><H1>Ceci est un test<H1></CENTER>' +
'</BODY></HTML>')
// sans espaces ni passage à la ligne
}
// -->
</SCRIPT>
|
|
