SELFHTML

Surveiller les modifications de la taille de la fenêtre

Page d'information: vue d'ensemble

vers le bas Remarques sur cet exemple
vers le bas Texte source avec explications

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

 vers le bas 

Remarques sur cet exemple

Une modification de la taille de la fenêtre par l'utilisateur a occasionnellement pour conséquence chez Netscape 4.x que celui-ci "oublie" les variables fixées, les positionnements dynamiques ou les mentions de feuilles de style. Il est pourtant possible de surveiller les modifications de la taille de la fenêtre pour réagir ainsi de façon ciblée à la modification. Même chez l'Explorer Internet MS ou chez Netscape 6.x il peut être judicieux de pouvoir réagir aux modifications.

On utilise, pour la surveillance de la taille de la fenêtre le gestionnaire d'événement onResize. Ce gestionnaire d'événement entre en action quand l'utilisateur modifie la taille de la fenêtre. Vous pouvez affecter une fonction, qui est exécutée lors des modifications de taille, à ce gestionnaire d'événement .

Faîtes attention qu'avec cet exemple, vous n'obtenez qu'une nouvelle construction de la page. Les variables et valeurs éventuellement modifiées sont perdues. Avec Opera 5.12, il n'est pas possible de surveiller les modifications de la taille de la fenêtre avec le gestionnaire d'événement onResize .

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0MS IE 4.0 Texte source avec explications

Dans l'exemple, la taille de la fenêtre est surveillée si elle est changée. Dès qu'elle est modifiée, la page est reconstruite et les nouvelles tailles sont écrites pour contrôle dans le document avec Autre page d'information document.write().

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head>
<title>Surveiller les modifications de la taille de la fen�tre </title>
<script type="text/javascript">
<!--

function largeur_fenetre()
{
 if (window.innerWidth) return window.innerWidth;
 else if (document.body && document.body.offsetWidth) return document.body.offsetWidth;
 else return 0;
}

function hauteur_fenetre()
{
 if (window.innerHeight) return window.innerWidth;
 else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
 else return 0;
}


function reconstruction()
{
 if (largeur != largeur_fenetre() || hauteur != hauteur_fenetre())
 window.history.go(0);
}

/*initialiser la surveillance de Netscape*/
if(!window.largeur && window.innerWidth)
  {
   window.onresize = reconstruction;
   largeur = largeur_fenetre();
   hauteur = hauteur_fenetre();
  }

//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
 /*initialiser la surveillance par l'Explorer Internet MS*/
 if(!window.largeur && document.body && document.body.offsetWidth)
  {
   window.onresize = reconstruction;
   largeur = largeur_fenetre();
   hauteur = hauteur_fenetre();
  }
//-->
</script>
<div id="exemple" style="position:absolute;top:100px;left:100px;border:solid 1px #000000;">
Text
</div>
<script type="text/javascript">
<!--
 document.write("largeur: "+largeur +" hauteur: "+hauteur);
//-->
</script>

</body></html>

Explication:

Les fonctions largeur_fenetre() et hauteur_fenetre()

Ces deux fonctions servent à rechercher les dimensions de la fenêtre. La fonction largeur_fenetre() vérifie si le navigateur connaît la propriété window.innerWidth (c'est le cas pour Netscape, mais pas pour l'Explorer Internet). Si c'est le cas, alors la valeur sauvegardée dans cette propriété est retournée. Si le navigateur ne connaît pas cette propriété, alors il est vérifié s'il connaît l'objet document.body et si cet objet connaît la propriété document.body.offsetWidth (c'est le cas pour l'Explorer Internet mais pas pour Netscape). Si c'est le cas, alors la valeur de la propriété document.body.offsetWidth est retournée. Si le navigateur ne devait pas pouvoir suivre non plus cet embranchement de l'instruction, 0 est retourné.
La fonction hauteur_fenetre() travaille de façon analogue et utilise les propriétés window.innerHeight ou bien document.body.offsetHeight.

initialiser la surveillance pour Netscape

Au chargement du fichier, la variable largeur n'existe pas encore. Étant donné qu'une variable globale est toujours une propriété ou un objet de l'objet fenêtre, il peut être vérifié avec window.largeur si celui-ci existe. Netscape connaît pour cet objet la propriété window.innerWidth. C'est pourquoi il traite l'instruction correspondante. Tout d'abord, la surveillance du gestionnaire d'événement onresize est initialisée (pour la compréhension voir aussi pour l'objet Autre page d'information event: généralités sur l'utilisation). onResize est déclenché dès que la taille de la fenêtre est modifiée et appelle alors la fonction de traitement reconstruction(). Enfin est sauvegardée dans la variable largeur la valeur retournée par la fonction largeur_fenetre() et dans la variable hauteur la valeur retournée par la fonction hauteur_fenetre(). Ainsi, les deux variables sont disponibles pour d'autres tâches dans le traitement.

initialiser la surveillance pour l'Explorer Internet MS

La surveillance pour l'Explorer Internet est structurée de façon similaire. À la différence du navigateur Netscape, il lui faut toutefois l'objet document.body. Cet objet n'est cependant disponible qu'après le chargement du repère Body. C'est pourquoi le passage script correspondant n'est pas noté dans l'entête de fichier mais au contraire dans le passage body du document. Netscape 6 connaît également l'objet document.body et ses propriétés. Il n'exécute cependant pas ce passage script étant donné que ce navigateur connaît déjà, à cet instant du déroulement, la variable largeur.

La fonction de traitement reconstruction()

La fonction reconstruction() est appelée quand le gestionnaire d'événement onResize est actif. Elle compare la valeur de la variable window.largeur avec la valeur retournée par la fonction largeur_fenetre() et la valeur de la variable window.hauteur avec la valeur retournée par la fonction hauteur_fenetre(). C'est à cela qu'elle reconnaît si la taille de la fenêtre a été modifiée. Dans ce cas, une reconstruction de la page a lieu, sans qu'elle ait à être rechargée du serveur, par l'utilisation de la méthode Autre page d'information history.go(), . Si le gestionnaire d'événement onResize est appelé sans que une modification tangible de la fenêtre ait eu lieu - ce qui peut se concevoir - il ne se passe rien étant donné que la condition pour recharger la page n'est pas remplie.

 vers le haut
page suivante Autre page d'information Généralités sur HTML dynamique
page précédente Autre page d'information Traitement d'erreur avec la commande try..catch
 

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@selfhtml.com.fr