SELFHTML: JavaScript / Exemples d'application / Surveiller les modifications de la taille de la fenêtre

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application

Surveiller les modifications de la taille de la fenêtre

Remarques sur cet exemple
Texte source avec explications

Exemple d'affichage: aperçu

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 .

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 document.write().

Exemple:

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.innerHeight  ;
 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 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 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.


	Généralités sur HTML dynamique
	Traitement d'erreur avec la commande try..catch

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application