DOM : fenêtre, interface, navigateur

I. Introduction

Après avoir appris comment manipuler les nœuds d'un document dans un précédent chapitre, nous allons maintenant voir comment il est possible de modifier les propriétés de la fenêtre du navigateur contenant ce document. Nous verrons également comment manipuler l'historique du navigateur, ainsi que quelques méthodes permettant de réaliser les fonctions de base de l'interface entre l'homme et la machine.

Toutes les propriétés et méthodes exposées dans ce chapitre sont appliquées à l'objet window.

II. La géométrie de la fenêtre et de l'écran

1. À l'extérieur de la fenêtre du navigateur

a. Taille de la fenêtre

Deux propriétés et deux méthodes permettent d'ajuster précisément, au pixel près, la taille de la fenêtre courante.

· outerHeight et outerWidth permettent de spécifier respectivement la hauteur et la largeur de la fenêtre. Ces propriétés ne sont pas supportées par Internet Explorer.

· La méthode resizeTo(width, height) permet de modifier la taille de la fenêtre et lui attribuer une largeur width et une hauteur height, indiquées en nombre de pixels. Par exemple,

function moitie(){

window.resizeTo(window.screen.availWidth/2, window.screen.availHeight/2) ;

}

Sous Firefox, cette méthode ne permet de redimensionner qu'une fenêtre préalablement ouverte avec window.open(), et ne permet pas de redimensionner une fenêtre possédant plusieurs onglets. Sous Internet Explorer, cette méthode ne permet pas non plus de redimensionner une fenêtre possédant plusieurs onglets.

· La méthode resizeBy(delta_width, delta_height) permet de modifier la taille de la fenêtre par rapport à la taille précédente, et de modifier sa largeur de la quantité delta_width et sa hauteur de la quantité delta_height, indiquées en nombre de pixels. Ces valeurs peuvent être négatives, ce qui a pour résultat une diminution de la taille de la fenêtre.

b. Comment déplacer la fenêtre ?

Deux méthodes sont utilisables : moveBy(delta_x, delta_y) déplace la fenêtre relativement à la position courante des quantités delta_x et delta_y respectivement horizontalement et verticalement, et moveTo(x, y) place le coin supérieur gauche de la fenêtre aux coordonnées x et y de la zone réservée à l'affichage sur l'écran.

c. Comment positionner la fenêtre par rapport à la taille de l'écran?

Donner une largeur à la fenêtre peut être inutile si on ne prend pas des précautions en tenant compte de la place disponible sur l'écran. Nous avons vu précédemment un exemple d'appel à une des propriétés le permettant ; nous allons maintenant les examiner plus en détails.

La taille de l'écran est accessible par six propriétés, qui bien sûr ne peuvent pas être modifiées.

· Les informations sur l'écran et ce qui y est affichable peuvent être obtenues par les propriétés window.screen.width et window.screen.height.

· Cependant, cette taille n'est pas forcément égale à celle qui est effectivement disponible ; le système d'exploitation réserve en effet certains espaces pour son interface (il peut s'agir d'une barre des tâches par exemple...). JavaScript définit ainsi quatre propriétés donnant ces dimensions :

o window.screen.availTop et window.screen.availLeft donnent respectivement l'ordonnée du premier pixel disponible à partir du haut de l'écran et l'abscisse du premier pixel disponible à partir de la gauche de l'écran, mais ces propriétés ne sont pas supportées par Internet Explorer.

o window.screen.availHeight et window.screen.availWidth donnent respectivement la hauteur et la largeur effectivement disponibles.

Cela étant établi, on peut modifier la position de la fenêtre du navigateur par rapport à l'écran en toute connaissance de cause. window.screenX et window.screenY fixent la position de la fenêtre par rapport respectivement aux bords gauche et supérieur de l'écran.

2. À l'intérieur de la fenêtre du navigateur

a. Largeur et hauteur disponibles

window.innerHeight et window.innerWidth donnent respectivement la hauteur et la largeur disponibles à l'intérieur de la fenêtre pour l'affichage d'un document. Ces propriétés ne sont pas supportées par Internet Explorer.

Internet Explorer fournit les propriétés document.body.clientHeight et document.body.clientWidth. Ces propriétés sont supportées par Firefox à condition d'indiquer un type de document HTML Transitional. Elles renvoient, comme leur nom l'indique, les dimensions occupées par l'élément body.

b. Place perdue à cause du défilement

Il est parfois nécessaire de faire défiler (scroll) un document. Ce défilement fait varier la position du coin supérieur gauche de la partie visible du document par rapport à son « vrai » coin supérieur gauche. Deux propriétés, ne faisant pas partie de la spécification et malheureusement non supportées par Internet Explorer permettent de connaître la place perdue.

window.pageXOffset retourne le nombre de pixels perdus par le défilement vers la droite ; window.pageYOffset retourne le nombre de pixels perdus par le défilement vers le bas.

Exercice 1. Manipulations de la fenêtre

Énoncé

Correction

III. Manipuler le navigateur et le système

1. Informations sur le navigateur

On peut accéder à nombre d'informations sur le navigateur à l'aide de la collection navigator de l'objet window.

· window.navigator.appName retourne le nom du navigateur.

· window.navigator.appVersion retourne le numéro de version du navigateur ainsi que diverses informations sur le système.

· window.navigator.language retourne la langue du navigateur. Cette propriété n'est pas supportée par Internet Explorer.

· window.navigator.platform retourne la plateforme sur laquelle fonctionne le navigateur (dans le cas de Windows, la chaîne retournée est "Win32").

· window.navigator.product retourne le nom du produit (dans le cas de Mozilla/FireFox, il s'agit de Gecko).

On peut également savoir si le document rendu l'est en mode Quirks ou Strict grâce à la propriété document.compatMode Dans le premier cas, la chaîne retournée est "BackCompat", dans le second "CSS1Compat".

Exercice 1. Informations sur le navigateur

Énoncé

Correction

2. Informations sur le document

En faisant appel à la propriété document.lastModified, on a accès aux date et heure de dernière mise à jour sur le serveur.

3. Modification du document chargé

a. Accès à l'historique du navigateur

On peut simuler des clics sur les boutons « Suivant et « Précédent » du navigateur, par des appels respectivement à window.history.forward() et window.history.back(). Cependant, l'appel à ces méthodes constitue un doublon de ce que l'utilisateur sait déjà qu'il est possible de faire à l'aide de son navigateur, et leur usage doit donc se justifier (dans le cas de la disparition de la barre de navigation, par exemple).

· window.history.go(index) permet de se déplacer en avant (avec un index positif) et en arrière (avec un index négatif) dans l'historique.

· window.history.length donne le nombre d'URL stockées dans l'historique de la fenêtre courante.

· document.referrer retourne l'URL de la page ayant lié à la page couramment affichée.

b. Modification directe de l'URL du document chargé

window.location donne et permet de spécifier l'URL du document chargé dans la fenêtre. La propriété document.URL joue un rôle similaire, à deux nuances près toutefois :

· pour Internet Explorer, la chaîne de caractères retournée par cette deuxième propriété, dans le cas d'un fichier local, fait apparaître des caractères "\" dans le chemin du fichier au lieu de caractères "/" (qui est la syntaxe normale pour une URL, même locale).

· pour Mozilla, cette propriété est en lecture seule, et ne peut donc pas servir à changer l'URL du document affiché.

window.home() renvoie à la page d'accueil du navigateur (non supportée par IE6).

Exercice 1. Historique

Énoncé

Correction

4. Gestion des fenêtres

a. Fermeture d'une fenêtre : window.close()

window.close() ferme la fenêtre courante. Les deux navigateurs principaux adoptent des politiques différentes afin de ne pas forcer le comportement de l'utilisateur. Internet Explorer demande une confirmation à l'aide d'une boîte de dialogue, Mozilla/FireFox refuse de fermer une fenêtre qui n'a pas été ouverte par un script. Opera quant à lui ferme la fenêtre sans préavis.

b. Ouverture d'une nouvelle fenêtre : window.open()

La création d'une nouvelle fenêtre est facile en JavaScript, mais il faut prendre garde à ce que cela ne soit pas perçu comme une intrusion par le visiteur du site. Bon nombre en effet souhaitent conserver le contrôle sur le nombre de fenêtres ouverts de leur navigateur. De plus, les utilisateurs d'aides techniques comme les synthèses vocales risquent de ne pas être averti ou de manquer le message de notification de l'ouverture de nouvelles fenêtres, ce qui perturbe leur navigation. Avec un minimum de précautions, il est néanmoins possible de ne léser ni surprendre personne, par exemple en indiquant explicitement dans l'intitulé du lien qu'il va s'ouvrir dans une nouvelle fenêtre.

La méthode window.open prend plusieurs paramètres. Il y a deux paramètres obligatoires, et plusieurs paramètres facultatifs. La syntaxe minimale est window.open(url,nom); où url est une chaîne de caractères qui donne l'URL de la page à charger dans la nouvelle fenêtre, et nom un identifiant qui permet de retrouver une référence à la fenêtre. Les paramètres facultatifs sont :

· top et left, qui précisent la position de la nouvelle fenêtre respectivement par rapport aux bords supérieur et gauche de l'écran, exprimée en pixels.

· outerHeight et outerWidth, qui précisent la taille de la fenêtre d'affichage en pixels.

· height et width, qui indiquent la taille de la zone d'affichage en pixels dans la nouvelle fenêtre.

· menubar. La présence d'une barre de menu peut être désactivée en ajoutant menubar=no.

· toolbar. La présence d'une barre d'outils peut être désactivée en ajoutant toolbar=no.

· location. La présence de la zone de saisie de l'adresse peut être désactivée en ajoutant location=no

· directories, qui permet d'indiquer en spécifiant directories=yes que le navigateur doit afficher des informations dans un panneau latéral, ou bien dans une barre de menu. Dans le cas des navigateurs Netscape, il s'agit de la barre d'outils personnelle. FireFox affiche le panneau de marque-pages, Internet Explorer la liste des liens.

· status. La présence d'une barre de statut peut être désactivée en ajoutant status=no.

· resizable. Il est possible d'interdire le redimensionnement de la fenêtre en indiquant resizable=no.

· scrollbars. Il est possible d'interdire la présence des barres de défilement en indiquant scrollbars=no.

· dependent permet de spécifier que la nouvelle fenêtre est dépendante de la fenêtre à partir de laquelle elle a été ouverte en indiquant dependent=yes. Dans ce cas, si la fenêtre mère est fermée, la nouvelle fenêtre est elle aussi automatiquement fermée.

Il est possible de trouver sur Internet des exemples de scripts permettant l'ouverture de nouvelles fenêtres, qui ne soient pas des obstacles à l'accessibilité. Voici par exemple comme réaliser un popup accessible avec un bouton de fermeture.

c. Relation entre deux fenêtres

Lorsqu'une fenêtre en ouvre une autre, cette information n'est pas perdue pour la seconde. La référence à la fenêtre ouvrante peut être récupérée par la propriété window.opener. Par exemple, si on écrit fenetre_ouvrante=window.opener, l'objet fenetre_ouvrante est alors utilisable et modifiable (par exemple, par fenetre_ouvrante.location(...)).

Dans le cas d'un document ouvert dans un frame, il est possible d'avoir accès au frame parent, par window.parent.

IV. Gestion de l'interface utilisateur

1. Émuler les boutons « Arrêter » et « Imprimer »

Deux méthodes facilitent un certain nombre de manipulations, ou bien guident l'utilisateur dans ses opérations, et s'appliquent à l'objet window.

· window.stop() équivaut au clic sur le bouton d'arrêt de chargement de la page par l'utilisateur. En raison de l'ordre de gestion des priorités, l'appel à cette méthode stoppera le chargement des grandes images, des nouvelles fenêtres éventuellement ouvertes et des autres grands objets.

· window.print() lance la boîte de dialogue d'impression standard pour le système d'exploitation pour la fenêtre courante.

2. Dialoguer avec l'utilisateur

Il est bien sûr possible de créer une fenêtre, dotée de boutons divers offrant à l'utilisateur des choix entre plusieurs options. Mais il est souvent inutile d'avoir recours à une telle lourdeur : les méthodes window.alert(chaine) et resultat=window.confirm(chaine) permettant respectivement d'afficher un message d'information, ou bien d'ouvrir une boîte avec une demande de confirmation. resultat est un booléen qui vaut true si l'utilisateur a cliqué sur OK, et false s'il a cliqué sur Annuler. Enfin, window.prompt(chaine) affiche une boîte de saisie :

· window.alert(chaine) affiche à l'écran le message d'information contenu dans chaine. Dans la boîte ne se trouve qu'un bouton OK.

· window.confirm(chaine) affiche la chaîne de caractères chaine accompagnée de deux boutons OK et Annuler. Cette méthode renvoie un booléen qui vaut true si OK a été cliqué, et false si l'utilisateur a cliqué sur Annuler.

· window.prompt(chaine) affiche la chaîne de caractères chaine puis une champ de saisie. La méthode retourne sous la forme d'une chaîne de caractères le résultat de la saisie de l'utilisateur. Si l'on souhaite traiter cette sortie comme un nombre, il est nécessaire de passer par une fonction de conversion de type, comme parseFloat ou parseInt. Par exemple, quantite=parseFloat(prompt("Entrez la quantité souhaitée :"));. Cette méthode n'est maintenant plus supportée par Internet Explorer 7.

Enfin, la propriété window.status donne accès au texte affiché dans la barre de statut en bas de la fenêtre du navigateur (par défaut, l'accès à cette fonctionnalité est désactivé sous FireFox et sous Internet Explorer 7).

3. Gestion des cookies

On peut créer et manipuler des cookies grâce à la collection document.cookie.

4. Faire défiler l'affichage

Le scrolling, ou défilement, permet l'exploration d'une page ; fournir des boutons permettant de le faire automatiquement peut être plus convivial que l'utilisation des barres des navigateurs.

· La méthode window.scroll(x, y), équivalente de la méthode window.scrollTo(x, y), permet de faire défiler l'affichage jusqu'au point de coordonnées x, y.

· La méthode window.scrollBy(x_delta, y_delta) permet de faire défiler des quantités delta_x horizontalement et delta_y verticalement, par rapport à la position courante.

· window.scrollByLines(nombre_de_lignes) et window.scrollByPages(nombre_de_pages) permettent de faire défiler l'affichage respectivement d'un nombre déterminé de lignes ou de pages. Ces propriétés ne sont pas supportées par Internet Explorer.