La meilleure méthode pour exécuter une fonction javascript dans un lien HTML

Après avoir essayé divers façons d’exécuter une fonction Javascript dans un lien HTML pour un menu dynamique dans un de mes sites, afin d’afficher des sous-catégories, je me suis rendu compte que chacune comportait certains problèmes. Par exemple:

<a onclick="javascript: afficher_sous_categories();">Catégorie principale</a>

La fonctionnalité est correcte et marchait avec la plupart des navigateurs standards (fureteurs), sauf qu’Internet Explorer ne considère pas ça comme un lien réel mais plutôt comme un anchor (lien vers une section de la même page), dû à l’absence de la partie href, et ne supportait donc pas les attributs CSS comme a:hover afin de lui donner une apparence différente lorsque le curseur de la souris se situait au-dessus, un comportement relativement important dans un menu dynamique.

<a href="#" onclick="javascript: afficher_sous_categories();">Catégorie principale</a>

Cette façon permets enfin à Internet Explorer de supporter les attributs CSS puisque nous avons le morceau href qui lui indique que c’est bel et bien un lien. Par contre, après le clic, il renvoyait au haut de la page comme si nous avions un anchor tout au début du code HTML, ce qui est vraiment indésirable.

<a href="javascript: afficher_sous_categories();">Catégorie principale</a>

Cette technique solutione quelques problèmes encourus dans les 2 premières méthodes, par contre la technique n’est pas considérée réellement standard par W3C, ce qui peut donner des résultats imprévisibles avec divers navigateurs moins connus, et ne fourni toujours pas un lien vers une page alternative pour ceux qui ne supporte pas Javascript, une mince minorité, soit, mais dans le cas d’un site de commerce électronique, chaque visiteur est potentiellement important.

Les moteurs de recherche ne supportent pas non plus javascript, on pourrait encourir des problèmes d’indexation ou de mauvaise distribution du Google PR dans le site.

<a href="javascript: void(0);" onclick="javascript: afficher_sous_categories();">Catégorie principale</a>

Une variation mineure des 2 méthodes précédentes, avec les mêmes fautes. Les navigateurs ne nous renvoient pas au haut de la page, comme dans l’utilisation de href="#", mais la valeur de href="" n’est toujours pas standard et ne fourni pas de page alternative pour afficher les catégories seondaires.

<a href="categorie.html" onclick="javascript: afficher_sous_categories();">Catégorie principale</a>

Cette fois on s’approche plus du format idéal, en effet, le lien comporte une valeur alternative si la fonction javascript n’est pas exécutée pour les visiteurs qui le ne supportent pas et ne peuvent afficher les catégories secondaires. Toutefois, même après l’exécution de la fonction javascript, le lien tient compte de sa valeur et il renvoie tout les visiteurs à la page cible.

Finalement, après des recherches additionnelles, je me suis rendu compte qu’il fallait reformatter un tant soit peu le format précédent afin d’avoir le comportement voulu:

<a onclick="javascript: afficher_sous_categories(); return false;" href="categorie.html">Catégorie principale</a>

Comme on peut voir, l’attribut onclick est déplacé avant la partie href, et on termine l’appel à la fonction avec un retour de valeur false, ce qui force javascript à ne pas tenir compte de l’attribut href qui suit. Donc dans ce cas nous avons finalement tout les morceaux en place:

Les visiteurs avec javascript bénéficient d’un menu dynamique qui allège et facilite la navigation. On évite le problème d’Internet Explorer, un défaut navrant mais comme il est encore très populaire, il faut faire avec. Les visiteurs avec un navigateur web limité, comme un téléphone mobile, peuvent quand même accéder à la page alternative qui affiche les sous-catégories. Et les moteurs de recherche peuvent indexer tout le site de façon optimale, une qualité fortement recherchée dans un site commerciale avide de trafic organique.

Partager cet article:

  • del.icio.us
  • Facebook
  • StumbleUpon
  • Twitter
  • LinkedIn

Catégories: Programmation web | 1 commentaire »
Les tags de cet article:

Note: Merci pour vos commentaires, j'apprécie ceux qui partagent leurs avis et leurs expériences de webmestre, ou s'il y a lieu, indiquent une erreur dans mes tutoriels, mais je ne peux évidemment pas faire de support technique pour votre site, alors veuillez éviter d'en faire la demande dans cette section.

Un commentaire pour “La meilleure méthode pour exécuter une fonction javascript dans un lien HTML”

  1. Tom dit: 12 octobre 2010 at 16:14

    Merci beaucoup.
    C’est fou comme c’est agréable un article construit, clair et facile d’exploitation.

Laisser un commentaire