Représentation arbre sous client léger - behavior

Insertion de Code

Les premiers exemples que nous allons voir vont nous permettre d'insérer du code HTML dans une page Web déjà chargée, sans la recharger.

Principe

Le principe utilisé est très simple à comprendre : une page Web de base chargée lors de l'appel à l'URL, un lien sur cette page auquel on affecte la propriété "behavior", une partie de code chargée et insérée dans la page lors du "clic" sur le lien.

Le code

Tout d'abord voyons le code de la page Web principale. Le code sera inséré entre les balises "<div>" dont l'id est "resultat". 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML XMLNS:IE>
<head>
<title>Insertion de code - Page Principale</title>
</head>
<body>
<h2>Ceci est la page principale dans laquelle nous voulons insérer du code...</h2>
<h3>--- Le code inséré débutera ici ---</h3>
<div id="resultat">
</div>
<h3>---  Le code inséré finira ici  ---</h3>
</body>
</html>

On déclare ensuite la propriété "behavior" dans la page pour pouvoir utiliser les fonctions définies. Cette définition se fait entre les balises "<body>" 


<HTML>
<body>
<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" />
</body>
</html>

Pour réaliser l'insertion de code proprement dite nous utilisons une fonction Javascript qui écrit le code chargé dans la page. Ici la chaîne de caractères récupérée sera insérée dans la balise "<div>" d'id "resultat".
Rappel : Le code Javascript s'inscrit entre les balises "<head>". 


<script language="JavaScript" type="text/javascript">
<!--
function onDownloadDone(s) {
	resultat.innerHTML=s;
}
//-->
</script>

Il ne nous reste plus qu'à créer un lien dans la page principale qui lancera le chargement du code à insérer grâce à une fonction de la propriété "behavior" : startDownload(). Le premier paramètre de la fonction indique la page à aller charger et le second paramètre indique la fonction à lancer lorsque la page est chargée. 


<A HREF="javascript:oDownload.startDownload('PS.html',onDownloadDone)">
Insérer la page...
</A>

Exemples

Voici un premier exemple avec un lien simple comme présenté ci-dessus.

- la page Web principale : voir
- le code inséré : voir
- l'exemple : voir


Un second exemple avec un lien sur une image. Le code inséré est toujours le même. Le lien est maintenant réalisé sur une image comme ceci :


Cliquez sur l'image pour insérer le code.
<img src="insert.png" alt="insert" style="cursor:pointer;"onClick="javascript:oDownload.startDownload('PS.html',onDownloadDone)" >
Voici les sources :
- la page Web principale : voir
- l'exemple : voir