L'objet window en JavaScript

Table des matières

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.

Table des matières 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:

Table des matières 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>

Version en cache

21/11/2024 09:45:58 Cette version de la page est en cache (à la date du 21/11/2024 09:45:58) afin d'accélérer le traitement. Vous pouvez activer le mode utilisateur dans le menu en haut pour afficher la dernère version de la page.

Document créé le 19/03/2002, dernière modification le 07/04/2023
Source du document imprimé : https://www.gaudry.be/javascript-window.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.