L'objet window en JavaScript

Contents

Introduction

Comme la moindre action sur un document est délimitée par la fenêtre, c'est le premier (ou le plus haut) objet au niveau hiérarchique. L'objet window délimite la zone de la fenêtre de l'explorateur où les documents html apparaissent. Dès le moment où une fenêtre de l'explorateur est ouverte (même si aucun document n'est chargé), l'objet window est défini dans le modèle courant en mémoire.

Dans le cas d'emploi de plusieurs cadres (frames), chaque cadre est une fenêtre.

De plus, l'influence d'une fenêtre s'étend aux dimensions, barres de défilement, mais aussi barres d'outils, barres d'état et de menu (sauf pour les MAC) qui englobent cette fenêtre. Cet ensemble d'éléments s'appelle chrome. Tous les explorateurs ne possèdent pas le contrôle complet de ce chrome, mais le langage JavaScript nous permet de notifier point par point la configuration désirée.

Contents Haut

Création d'une fenêtre

La première fenêtre ne peut être générée par un script. C'est par l'intermédiaire du navigateur (internet explorer, netscape, etc.), ou en cliquant sur un lien (dans un e-mail par exemple), que l'on ouvre une fenêtre. Le langage JavaScript nous permet ensuite la création de nouvelles fenêtres, à l'aide de certains éléments de cette fenêtre principale.

La méthode qui nous permet la création d'une nouvelle fenêtre est window.open().

Syntaxe

  1. var nom_variable = window.open(
  2. 		"URL",
  3. 		"nom_fenêtre"
  4. 		[, "param1"]
  5. 		[, "param2"]
  6. 	)
  • URL se limite au nom de la page (suivis de son extension) si cette dernière se trouve dans le même répertoire.
  • nom_fenêtre est indispensable. Il ne s'agit pas ici du nom de la page, ni du titre donné dans la balise <title> de cette page: ce nom est la valeur que renvoie la méthode open() de l'objet window. Il nous sera utile par exemple pour des attributs <target> dans des liens.
  • param1 est entre crochets, il est donc facultatif. Il s'agit d'une chaîne composée d'une liste d'expressions se comportant comme des balises HTML et séparées par des virgules.
  • param2 est le replaceFlag.

Exemple

  1. var nouvelle_page = window.open(
  2. 		"page2.html",
  3. 		"p2",
  4. 		"height=100, width=200"
  5. 	);

Remarques

  • Nous pouvons constater qu'il s'agit d'une affectation de la fonction window.open() à la variable nouvelle_page. La valeur window.open() est donc la page page2.htm suivant les paramètres de la fenêtre en hauteur et largeur. nouvelle_page peut donc être utilisée comme variable dans le document.
  • Nous pouvons fermer la fenêtre par la méthode close(). Dans le cas de notre exemple, nous devrions avoir nouvelle_page.close().

Exemple complet

Dans l'en-tête:

  1. var nfenetre;
  2. function nouv_fen (){
  3. 	nfenetre = window.open ("demo/javascript/001.html","exemple","height=600,width=800")
  4. }
  5. function ferm_fen (){
  6. if (nouv_fen){
  7. 	nfenetre.close ()
  8. 	nouv_fen = null
  9. 	}
  10. }

Dans le corps:

  1. <form>
  2. 		<input type="button" value="Cr&eacute;er une nouvelle fen&ecirc;tre" onclick="nouv_fen()" width="300" />
  3. 		<input type="button" value="Fermer la nouvelle fen&ecirc;tre" onclick="ferm_fen()" width="300" />
  4. </form>

Résultat:

Contents Haut

Propriétés et méthodes

Propriétés de window 
Propriété | Description |
closed | true si la fenêtre est fermée |
defaultStatus | Texte par défaut qui apparaît dans la barre de statut du navigateur |
name | Nom de la fenêtrefenêtre |
opener | Fenêtre ouvrante |
screenLeft | Position horizontale en pixel de la fenêtrefenêtre par rapport au bord gauche de l'écran |
screenTop | Position verticale en pixel de la fenêtrefenêtre par rapport au bord suppérieur de l'écran |
status | Texte de la bare de statut |
Méthodes de window 
Méthode | Description |
alert() | |
blur() | |
clearInterval() | |
clearTimeout() | |
close() | |
confirm() | |
focus() | |
getComputedStyle() | |
getSelection() | |
home() | |
moveBy() | |
moveTo() | |
open() | |
print() | |
prompt() | |
resizeBy() | |
resizeTo() | |
scrollBy() | |
scrollTo() | |
setInterval() | |
setTimeout() | |
stop() | |

Accès à la fenêtre

Nous pouvons faire référence à l'objet window de deux manières afin d'accéder à ses propriétés et méthodes:

En le nommant

Cela nous permet de désigner de manière spécifique la fenêtre vers laquelle nous pointons. C'est la méthode que nous utiliserons le plus souvent.

Syntaxe:

window.nom_propriété
window.nom_méthode ([paramètres])

Par son synonyme

Lorsque le script qui effectue la référence pointe vers la fenêtre qui supporte le document, un synonyme (self) est employé pour l'objet window. Self indique donc la fenêtre courante qui supporte le script, ce qui rend la lecture de ce dernier plus aisée dans les cas d'emploi de fenêtres (cadres) multiples (multiframes).

Syntaxe:

self.nom_propriété
self.nom_méthode ([paramètres])

Remarque

Il existe aussi une troisième méthode:

Lorsqu'un script est exécuté, l'objet window est toujours présent. Il n'est donc pas toujours nécessaire lorsque l'on fait référence à un objet à l'intérieur de la fenêtre courante.

nom_propriété
nom_méthode ([paramètres])

Propriété window.status

Nous pouvons, par le JavaScript, paramètrer l'affichage de texte dans la barre de statut. Pour rappel, la barre de statut se trouve en bas de la fenêtre de l'explorateur, et affiche diverses informations (l'URL d'un lien au survol de celui-ci, etc.).

Il peut s'avérer intéressant, par exemple, de fournir une description de la page vers laquelle pointe le lien au lieu de son adresse, ou d'afficher divers messages destinés au visiteur.

Nous pouvons le réaliser grâce au manipulateur d'événement onMouseOver d'un objet link (lien).Il n'est donc pas nécessaire de définir une nouvelle fonction, ou même d'inclure les balises de script dans la page.

Exemple :

  1. <a href="/infobrol.html" onMouseOver="window.status='Infobrol: Page de test.'; return true;">R&eacute;sultat</a>

Remarque: nous devons aussi prévoir un manipulateur d'évènement onMouseOut afin de rendre vierge la barre de statut.

  1. <a href="/infobrol.html"
  2. 	onMouseOver="window.status='Infobrol: Page de test.'; return true;"
  3. 	onmouseout="window.status=''; return true;"
  4. 	onclick="window.status=''; return true;"
  5. >R&eacute;sultat</a>

English translation

You have asked to visit this site in English. For now, only the interface is translated, but not all the content yet.

If you want to help me in translations, your contribution is welcome. All you need to do is register on the site, and send me a message asking me to add you to the group of translators, which will give you the opportunity to translate the pages you want. A link at the bottom of each translated page indicates that you are the translator, and has a link to your profile.

Thank you in advance.

Document created the 19/03/2002, last modified the 07/04/2023
Source of the printed document:https://www.gaudry.be/en/javascript-window.html

The infobrol is a personal site whose content is my sole responsibility. The text is available under CreativeCommons license (BY-NC-SA). More info on the terms of use and the author.