SELFHTML: JavaScript / Exemples d'application / Changer simultanément deux cadres

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application

Changer simultanément deux cadres

Remarques sur cet exemple
Texte source avec explications

Exemple d'affichage: aperçu

Remarques sur cet exemple

Celui qui a déjà conçu un projet HTML avec plusieurs cadres, réalise combien il peut être souhaitable quelquefois lors de l'exécution d'un lien, de modifier non seulement le contenu d'une fenêtre cadre, mais celui de deux ou de plusieurs cadres simultanément. Maintenant, on peut dans de tels cas mettre un lien à un fichier, qui définit lui un nouveau jeu de cadres correspondant. Mais si vous avez beaucoup de liens de ce genre, ce procédé deviendra vite lourd. Comme alternative à cette solution, vous pouvez vous faire assister d'un JavaScript.

Un inconvénient de la "modification simultanée de deux cadres" avec JavaScript est cependant qu'avec ce procédé, la fonction History du navigateur ne travaille plus comme prévu. Car du point de vue du navigateur, deux liens ont été exécutés, et un élément de l'historique ne revient qu'à la page précédente. L'utilisateur doit donc cliquer deux fois sur le bouton page précédente du navigateur pour revenir là où il était avant d'avoir cliqué sur le lien. Une possibilité d'éviter cette réaction non désirée du navigateur est de proposer soi-même des liens qui exécutent l'action "page précédente" et "page suivante" du navigateur, de telle façon cependant que les deux cadres soient modifiés simultanément comme souhaité. L'exemple de cette page montre aussi comment il est possible de réaliser ce genre de choses.

Texte source avec explications

L'exemple montre le fichier avec la définition du jeu de cadres et le fichier avec les liens. Les autres fichiers qui sont appelés dans l'exemple d'affichage sont superflus pour la compréhension.

Exemple - fichier `deux_frames.htm`:

Exemple d'affichage: aperçu

<html>
<head>
<title>Changer simultan&eacute;ment deux cadres</title>
</head>
<frameset cols="180,*">
 <frame src="deux_frames_gauche.htm" name="gauche">
 <frameset rows="180,*">
   <frame src="deux_frames_depart_haut.htm" name="haut">
   <frame src="deux_frames_depart_bas.htm" name="bas">
 </frameset>
</frameset>
</html>

Exemple - fichier `deux_frames_gauche.htm`:

<html>
<head>
<title>Deux cadres - liens</title>
<script type="text/javascript">
<!--
function deux_cadres(URI1,F1,URI2,F2) {
  Frame1=eval("parent."+F1);
  Frame2=eval("parent."+F2);
  Frame1.location.href = URI1;
  Frame2.location.href = URI2;
}
function deux_cadres_avant(F1,F2) {
  Frame1=eval("parent."+F1);
  Frame2=eval("parent."+F2);
  Frame1.history.back();
  if (!window.opera) window.setTimeout("Frame2.history.back()",10);
}
function deux_cadres_apres(F1,F2) {
  Frame1=eval("parent."+F1);
  Frame2=eval("parent."+F2);
  Frame1.history.forward();
  if (!window.opera) window.setTimeout("Frame2.history.forward()",10);
}
//-->
</script>
</head>
<body bgcolor="#EEEEEE" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">

<div>
<hr noshade size="1">
<a href="javascript:deux_cadres_avant('haut','bas')"><b>page pr&eacute;c&eactue;dente</b></a>
<b>|</b>
<a href="javascript:deux_cadres_apres('haut','bas')"><b>page suivante</b></a>
<hr noshade size="1">
</div>

<h2>Liens</h2>
<p>
<a href="javascript:deux_cadres('deux_frames_depart_haut.htm','haut','deux_frames_depart_bas.htm','bas')">
<b>Bienvenue</b>
</a>
<br>
<a href="javascript:deux_cadres('deux_frames_suzan_haut.htm','haut','deux_frames_suzan_bas.htm','bas')">
<b>Susan Sarandon</b>
</a>
<br>
<a href="javascript:deux_cadres('deux_frames_jack_haut.htm','haut','deux_frames_jack_bas.htm','bas')">
<b>Jack Nicholson</b>
</a>
</p>

</body>
</html>

Explication:

La première partie de l'exemple montre le fichier deux_frames.htm, qui prépare le jeu de cadres pour une base de données d'acteurs. Le jeu de cadres comprend trois parties: à gauche une fenêtre cadre nommée gauche pour les liens, et à droite deux cadres nommés respectivement haut et bas pour les informations.

La deuxième partie de l'exemple montre le fichier deux_frames_gauche.htm, qui est chargé au début dans la fenêtre cadre de gauche, comme on peut le voir aussi dans le fichier deux_frames.htm. Ce fichier contient les liens. Tous les liens modifient simultanément le contenu de deux fenêtres cadres, à savoir chacune des deux fenêtres cadres de droite nommées haut et bas. C'est pourquoi c'est aussi dans cette fenêtre qu'est noté le code JavaScript pour la modification des deux autres fenêtres cadres.

Pour comprendre le mode de fonctionnement, il est indiqué de considérer d'abord de plus près les liens HTML dans le passage <body> du fichier deux_frames_gauche.htm. Tous les liens contiennent avec l'attribut href du code JavaScript, introduit par le pseudo-gestionnaire d'événement javascript:. Derrière celui-ci est placé l'appel d'une fonction. Pour le lien avec le texte de lien page précédente c'est la fonction deux_cadres_avant() qui est appelée, Pour le lien avec le texte de lien page suivante c'est la fonction deux_cadres_apres, et pour les autres liens, la fonction deux_cadres(). Dans tous les cas, les noms des deux cadres présents sont transmis comme paramètres à la fonction respectivement appelée, à savoir 'haut' et 'bas'.

Dans l'entête du fichier HTML, donc entre <head> et </head>, est défini un passage JavaScript en HTML avec <script type="text/javascript"> .... </script>. À l'intérieur de ce passage, sont notées les trois fonctions deux_cadres(), deux_cadres_avant() et deux_cadres_apres() , qui sont appelées par les liens dans le fichier.

La fonction deux_cadres() attend quatre paramètres:
1. l' URI du contenu désiré de la première fenêtre cadre (URI1)
2. le nom de la première fenêtre cadre désirée dans le jeu de cadres (F1)
3. l'URI du contenu désiré de la deuxième fenêtre cadre (URI2)
4. le nom de la deuxième fenêtre cadre désirée dans le jeu de cadres (F2)
Ce faisant on on conserve à la fonction un caractère général, c'est à dire que vous pouvez utiliser cette fonction également dans des jeux de cadres tout à fait différents pour le même objectif.
À l'intérieur de la fonction, se trouvent d'abord deux appels de la fonction eval. Ceci est nécessaire pour que l'interpréteur JavaScript n'interprète pas les noms des fenêtres cadres transmis comme de simples chaînes de caractères, mais au contraire pour qu'il tente de les identifier comme des objets existants. Les appels sont structurés de telle façon que dans les variables Frame1 ou bien Frame2 de l'exemple, sont sauvegardés à la suite les objets parent.haut ou parent.bas. Ainsi équipées, les deux variables peuvent enfin, dans les appels Frame1.location.href et Frame2.location.href, être utilisées comme les objets correspondants, de façon à ce que soit exécuté, dans notre exemple: parent.haut.location.href ou bien parent.bas.location.href. La propriété location.href obtient un lien JavaScript à une autre adresse. Dans la fonction, sont tout simplement affectées aux deux appels de cette propriété, les deux adresses URI1 ou URI2 transmises à l'appel de la fonction.

Les fonctions deux_cadres_avant() et deux_cadres_apres() sont construites de façon similaire. Vous n'avez besoin en fin de compte que de deux paramètres, à savoir les noms des fenêtre cadres concernées (F1 et F2). Avec les appels des méthodes d'objet history.back() ou bien history.forward() vous obtenez la fonctionnalité des boutons correspondants "page précédente" et "page suivante" du navigateur. les raisons qui ont mené à ce que le deuxième appel respectif des méthodes objet soit fixé encore une fois dans setTimeout() avec un léger décalage de 1/100 de seconde, sont d'ordre pragmatique: faute de quoi certaines versions de l'Explorer Internet MS "oublieraient" d'exécuter le deuxième appel.

Attention:

Opera 5.12 interprète la méthode history.back() en se référant à la fenêtre _top et ignore la mention de la fenêtre cible à l'appel de la méthode. Cela vaut également si vous appelez vous même la fonction dans un cadre. Le navigateur s'en tient étroitement à l'ordre dans lequel les inscriptions sont faites dans l'historique dans la fenêtre principale. Si deux cadres ont été modifiés simultanément au moyen de JavaScript, Opera considère cette modification comme une seule inscription dans l'historique et recule de deux pages dans l'historique. Pour cette raison, il faut éviter qu'Opera exécute une deuxième fois history.back(). Dans l'exemple ci-dessus, on l'obtient avec if (!window.opera). Seul le navigateur Opera connaît l'objet window.opera. Dans la condition si, alors... avec "if" il est demandé si le navigateur ne connaît pas cet objet. La méthode objet n'est appelée une deuxième fois que dans ce cas.


	Empêcher l'aperçu de vos pages dans des cadres
	Fonctions indépendantes de l'objet