Sakatruc

Je souhaite déterminer si le visiteur de la page actuelle se trouvait déjà sur mon blog à la page précédente pour, par exemple, lui afficher un message de bienvenue ou le diriger vers une page ou un article spécifique.

La propriété referrer de l'objet window.document contient l'url de la page par laquelle vous arrivez sur la page en cours.

Si vous êtes sur la page http://pseudo.cowblog.fr et que vous cliquez sur le lien "Profil" dans le menu, lorsque vous arrivez sur la page du profil, document.referrer contient http://pseudo.cowblog.fr

Il suffit donc de tester cette propriété avant d'afficher un message de bienvenue.

Si vous avez eu la curiosité d'afficher le code source de la page html de votre blog, vous aurez pu remarquer ces lignes au début :

qui définissent une variable javascript contenant le pseudo de votre blog. On va l'utiliser dans le script qui va suivre.

On commence par empêcher l'exécution de ce code javascript lorsqu'on se trouve sur la page "Code HTML libre" comme vu sur l'article précédent.

Ensuite, on va tester la position de la sous-chaine (indexOf) http://pseudo.cowblog.fr dans la chaine que contient document.referrer.

Si la sous-chaîne est trouvée, sa position sera à 0, le visiteur se trouvait déjà sur une page du blog avant d'arriver à la page en cours. Dans le cas contraire, elle sera à -1, le visiteur n'était pas sur le blog on lui affiche donc le message de bienvenue, quelle que soit la page du blog sur laquelle il se trouve.

Pour afficher une liste dans laquelle l'ordre des éléments (par ex. une liste d'achats) n'a pas d'importance, il est préférable d'utiliser une liste non-ordonnée.

On utilise les balises HTML <ul> (unordered list) et <li> (list item).

Résultat :

• farine
• oeufs
• eau
• biscuits
• huile

Pour définir l'apparence visuelle de cette liste on peut utiliser les sélecteurs de type balise (correspondant aux balises utilisées) : ul et li.

Les propriétés CSS propres aux listes sont (propriété en gras, liste des valeurs possibles, la valeur par défaut est soulignée) :

Par exemple :

Résultat :

• farine
• oeufs
• eau
• biscuits
• huile

Ce type de liste trouve son utilité dans les menus, qui sont des listes de liens.

Pour plus d'informations sur les listes, vous pouvez consulter la traduction française de la recommandation du W3C.

Il peut être utile de déterminer si on se trouve sur la première page du blog pour y afficher, par ex. un message de bienvenue, un bloc de présentation, etc.

Pour ce faire, un petit script en javascript à placer dans le code html libre :

<script type="text/javascript">
if ((location.pathname=='/') || (location.pathname=='/index.html') || (location.pathname=='/1.html')) {
     document.write('Première page/Index du blog');
}
</script>

Explications :

On va utiliser la propriété « pathname » de l'objet « window.location », qui contient le répertoire et le nom de fichier de l'URL en cours, c'est à dire ce qui suit l'URL du blog (http://pseudo.cowblog.fr).

Si cette propriété est égale à '/', '/index.html' ou '/1.html', on se trouve sur la première page du blog et on affiche donc, dans cet exemple : 'Première page/Index du blog'.

LateLament