L'objet window en JavaScript

Inhaltsverzeichnis

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.

Inhaltsverzeichnis 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:

Inhaltsverzeichnis 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>

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 19/03/2002, zuletzt geändert 07/04/2023
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/javascript-window.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.