La classe WINDOW de JavaScript

Retour au menu

Présentation

Il s'agit de la classe située au sommet de la hiérarchie.
De façon générale, comme tout se déroule dans une fenêtre du navigateur, le nom de la fenêtre est implicite, le préfixe window. peut être omis pour désigner un objet ou une méthode de la fenêtre courante (sauf dans un gestionnaire d'événement dont l'objet courant étant un document, il faut préciser la fenêtre de ce document).
Bien entendu si la propriété ou la méthode s'adresse à une fenêtre définie par la programmeur à l'aide de la méthode open(), il faut préfixer par son nom.

Voici les principales propriétés et méthodes

Propriétés simples

Propriétés objets

Ces propriétés sont en fait elle-même des objets dotées de propriétés et de méthodes

Méthodes de gestion d'objets fenêtres

Avec open()et close(), le programmeur dispose de moyens très souples avec les gestionnaires d'événements, d'ouvrir et de fermer des fenêtres auxiliaires.
nomFenetre =open("URL","nom_fenetre", "options"); ouvre une nouvelle fenêtre
  • "URL" est l'adresse du document à charger dans la nouvelle fenêtre.
  • "nom_fenetre" est le nom de la fenêtre, à donner à l'attribut TARGET des balises <FORM> ou <A>
  • "options" est une liste d'éléments optionnels qui précisent l'aspect de la fenêtre.
  • On utilise ensuite nomFenetre pour faire référence à un objet ou une propriété de la nouvelle fenêtre.
    Par exemple, pour écrire dans le composant message du formulaire formu situé dans le document de la fenêtre fen, créee par fen=open(...), on écrit :
    fen.document.formu.message.value= "...";

Paramètres de la partie OPTIONS

On peut contrôler l'apparence de la nouvelle fenêtre à l'aide du 3ème paramètre de la méthode open() qui accepte une liste d'options séparées par des virgules

barre d'outils toolbar[=yes|no] | [=1|0]
url visible location[=yes|no] | [=1|0]
répertoire ? directories[=yes|no] | [=1|0]
barre d'état status[=yes|no] | [=1|0]
barre de menu menubar[=yes|no] | [=1|0]
barre de défilement scrollbars[=yes|no] | [=1|0]
redimensionnement resizable[=yes|no] | [=1|0]
visibilité permanente ? alwaysRaised[=yes|no] | [=1|0]
fermée avec la fen. parente dependant[=yes|no] | [=1|0]
hauteur height= dimension en pixels
largeur width= dimension en pixels
positionnement X screenX = nb pixels
positionnement Y screenY = nb pixels

Autres méthodes de window

(voir plus loin)

  • Exemples de base

    Apprenons à utiliser les méthodes open(), et close()

    Exemple 1 : ouvrir

    La fonction OuvrirFenetre(), déclenchée par l'événement onClick sur le bouton, utilise la fonction open() pour ouvrir une nouvelle fenêtre, nommée fen1 

    <SCRIPT>
var hauteur=200;   // hauteur de la fenêtre à créer
var largeur=500;
options="width="+largeur+",height="+hauteur+"toolbar=yes, 
directories=no, menubar=no,scrollbars=yes,status=yes";

function OuvrirFenetre1() { 
fen1 =open("","Nouvelle_fenetre1",options); 
}
</SCRIPT>
<form>
Pour créer une fenêtre "enfant", cliquer sur ce bouton :
<INPUT type =Button value="Nouvelle fenêtre 1" 
 onClick="OuvrirFenetre1()">
</form>

    Exemple 2 : "Une fenêtre doit être ouverte ou fermée"

    La méthode close() adressée à une variable fenêtre permet de la fermer. Il est préférable avant de tester si elle a été ouverte (elle peut être masquée), avec une condition du genre if (fen != null) . 
    <SCRIPT>
var hauteur=200;   // hauteur de la fenêtre à créer
var largeur=500;
options="width="+largeur+",height="+hauteur+"toolbar=yes, 
directories=no, menubar=no,scrollbars=yes,status=yes";

function OuvrirFenetre1() { 
fen1 =open("","Nouvelle_fenetre",options); 
}
</SCRIPT>
<body><form>
Pour créer une fenêtre "enfant", cliquer sur ce bouton :
<INPUT type =Button value="Nouvelle fenêtre 1"
	 onClick="OuvrirFenetre1()">
<INPUT type =Button value="Fermer"  onClick="fen1.close()">
</form></body>

    Pour vérifier :

    Exemple 3 : afficher un document dans une fenêtre

    Chargement d'un document à la création d'une nouvelle fenêtre
    Cet exemple est semblable au précédent, à la différence que le fichier tp-window.html, passée en 1er paramètre de OPEN(), va être affichée dans le document dela nouvelle fenêtre.

    function OuvrirFenetre2() { 
fen2 =open("tp-window.html","Nouvelle_fenetre",options); 
// les 2 lignes suivantes sont équivalentes
fen2 =open("","Nouvelle_fenetre",options); 
fen2.location="tp-window.html";
}

    Pour vérifier :
    Ecriture dans la nouvelle fenêtre après sa création
    Supposons avoir créé une fenêtre vide, nommée Fen3.
    Pour écrire dans cette fenêtre, il suffit de passer une chaine de caractères à la méthode document.write de Fen3 : Fen3.document.write("texte").
    Attention ! message ne sera effectivement affiché dans Fen3, que s'il est impérativement suivi de code comme <BR> ou si le document (pas la fenêtre) est fermé Fen3.document.close(); 

    function  EcrireFenetre3(message) {
fen3 =open("","Nouvelle_fenetre",options);
if (message !="") 
  fen3.document.write(message+"</BR>");
  else 
  alert ("message vide !"); 
}
<FORM>
Ecrire un court texte dans le champ de saisie ci-dessous
<TEXTAREA NAME="zone" ROWS=8 COLS=55 VALUE="" WRAP="PHYSICAL">
Je suis très fier de ma nouvelle fenêtre !
</TEXTAREA>
puis le faire afficher dans <TT>MaFenêtre </TT>
en cliquant sur : 
<INPUT type =Button name="Ecrire" value="Ecrire"  
 onClick="EcrireFenetre3(this.form.zone.value)">
</FORM>

    Ecrire un court texte dans le champ de saisie ci-dessous

    puis le faire afficher dans la fenêtre en cliquant sur :

    Exemple 4 : charger un document en ligne

    <script>
function fermer() {
if (fen1 !=null) fen1.close();
if (fen2 !=null) fen2.close();
}
function Connexion(moteur) { 
if (moteur==1) {
	fen1=open("","YAHOO",opts); 
	fen1.focus();
	fen1.location.href='http://www.yahoo.fr';
	}
	else  {
	fen2=open("","NOMADE",opts); 
	fen2.focus();
	fen2.location.href='http://www.nomade.fr';
	}
}
<form>
<input type=button value="Connexion à Yahoo" onClick="Connexion(1)">
<input type=button value="Connexion à Nomade" onClick="Connexion(2)">
<INPUT type =Button value="Fermer"  onClick="fermer()">
</form>
    Pour tester :

    Méthodes de temporisation setTimeout() et clearTimeout()

    Connaitre les propriétés de window

    function  propriétés(objet, nom) {
var texte = "";
 for (var i in objet )
 texte +=nom."i"+i+" " +objet[i] +"<br>;
return texte
}
document.write("<HR>Propriétés <BR>"+
 propriétés(document,"document")+"<HR>")

    Pour exécuter, appuyer sur ce bouton :