Cours de JavaScript - Le DOM: fenêtre, navigateur et interface-utilisateur

version 1.2.4, dernière mise à jour le 26 juin 2013.

   

Table des matières (TdM)

  1. I. Introduction
  1. II. La géométrie de la fenêtre et de l'écran
    1. À l'extérieur de la fenêtre du navigateur
      1. Taille de la fenêtre
      2. Comment déplacer la fenêtre ?
      3. Comment positionner la fenêtre par rapport à la taille de l'écran?
    2. À l'intérieur de la fenêtre du navigateur
      1. Largeur et hauteur disponibles
      2. Place perdue à cause du défilement
    3. Exercice : Manipulations de la fenêtre
  1. III. Manipuler le navigateur et le système
    1. Informations sur le navigateur
      1. Exercice : Informations sur le navigateur
    2. Informations sur le document
    3. Modification du document chargé
      1. Accès à l'historique du navigateur
      2. Modification directe de l'URL du document chargé
      3. Exercice : Historique
    4. Gestion des fenêtres
      1. Fermeture d'une fenêtre : window.close()
      2. Ouverture d'une nouvelle fenêtre : window.open()
      3. Relation entre deux fenêtres
  1. IV. Gestion de l'interface utilisateur
    1. Émuler les boutons « Arrêter » et « Imprimer »
    2. Dialoguer avec l'utilisateur
    3. Gestion des cookies
    4. Faire défiler l'affichage

Retour au menu

Contenu du cours

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.

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.

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.

>Retour à la TdM

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.

>Retour à la TdM

Exercice 1. Manipulations de la fenêtre

Énoncé
Correction

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.

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

>Retour à la TdM

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.

>Retour à la TdM

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).

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 :

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

Exercice 1. Historique

Énoncé
Correction

>Retour à la TdM

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);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 :

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.

>Retour à la TdM

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.

>Retour à la TdM

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 :

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).

>Retour à la TdM

3. Gestion des cookies

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

>Retour à la TdM

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.

>Retour à la TdM

Historique de ce document

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu