Émuler target sans target

La balise <a> constitue, sans nul doute, l'élément le plus important d'une page Html. En effet, celle-ci permet, notamment grâce à son attribut "href", d'insérer des liens vers d'autres pages, vers d'autres sites, vers une adresse e-mail, etc. Mais, cette balise possède aussi un attribut target dont la fonction est de déterminer la façon d'afficher une page appelée par la balise <a>.

Malheureusement ou heureusement (cela dépend des points de vue), l'attribut target n'est plus accepté dans les recommandations du Xhtml. Pour tout dire, les concepteurs de ces recommandations ont décidés que l'utilisation de cet attribut ne correspondait pas à l'esprit du Xhtml.

Dès lors, il n'est pas possible d'utiliser à la fois l'attribut target dans la balise <a> tout en essayant de créer un document conforme aux normes Xhtml Strict. Pourtant, c'est possible ! Et, nous allons voir comment !

Présentation de l'attribut "target"

D'abord, rappelons les différentes valeurs que peut prendre l'attribut target :

  • _blank : ouvre le lien spécifié par href dans une nouvelle fenêtre ;
  • _parent : ouvre le lien spécifié par href dans la frame "parent" de la frame courante ;
  • _self : ouvre le lien spécifié par href dans la fenêtre en cours ;
  • _top : ouvre le lien spécifié par href afin que, dans tous les cas, il soit affiché dans la totalité de la fenêtre ;

Par défaut, lorsque l'attribut target est absent, un lien spécifié par l'attribut href s'ouvre dans la fenêtre en cours (comme si target avait reçu la valeur "_self").

Pour complèter notre présentation de l'attribut target, voici un petit exemple qui montre comment l'implémenter dans la balise <a> :

<a href="http://www.lepetitatelier.be" target="_blank">Ouvrir une nouvelle fenêtre</a>

Utiliser "Javascript"

Pour émuler l'attribut target, nous n'avons pas le choix: il faudra utiliser du code Javascript ! En effet, l'un des grands avantages de Javascript, c'est que son code n'est pas soumis à la validation W3C (pour autant, bien sûr, que certaines précautions soient prises — voir à ce propos : Insérer du code Javascript). Du coup, il est possible de tromper le validateur en lui faisant prendre les vessies pour des lanternes.

Toutefois, il existe un inconvénient lorsqu'on utilise Javascript. Hé oui, il ne faut jamais oublier que Javascript est un code interprété par le navigateur client. De ce fait, il peut arriver qu'un internaute désactive Javascript.

En tant que programmeur soucieux d'offrir des applications qui fonctionnent bien, il faut tenir compte de cette possibilité. Même si celle-ci peut être considérée comme rarissime. De plus, il faut essayer de ne pas pénaliser les internautes qui auraient désactivés Javascript par inadvertance. À la limite, il sera peut être judicieux d'avertir l'internaute à l'aide d'un message inséré entre les balises <noscript></noscript>.

Donc, dans cette émulation de l'attribut "target", je propose d'utiliser du Javascript tout en prévoyant une sortie de secours si celui-ci a été désactivé.

Émuler "target"

Sans plus tarder, voici la solution que je vous propose. Dans cette solution, nous allons attribuer à target la valeur "_blank". Donc, en cliquant sur la balise <a>, vous ouvrez l'adresse spécifiée par "href" dans une nouvelle fenêtre.

Voici le code :

<a href="http://www.lepetitatelier.be" onclick="this.target='_blank'; this.submit(); return false;">Ouvrir une nouvelle fenêtre</a>

Dans cette solution, nous commençons par spécifier une url dans l'attribut "href". Grâce à notre petite bidouille et si Javascript est actif sur le navigateur client, c'est cette adresse web qui sera chargée dans une nouvelle fenêtre. Par contre, si Javascript a été désactivé, cette page sera chargée dans la fenêtre courante.

Ensuite, nous allons travailler avec l'évènement "onclick". Celui-ci est déclenché dès que l'internaute clique (souris ou clavier) sur la balise <a>.

À cet évènement, nous n'allons pas attribuer une valeur, mais plutôt un code. Ici, nous insérons des instructions écrites en Javascript :

onclick="this.target='_blank'; this.submit(); return false;"

Ce code est constitué de trois instructions. Elles sont séparées par un point-virgule.

La première de ces instructions ne fait rien d'autre que d'attribuer la valeur "_blank" à "target". Ici, le mot "this" est une variable objet qui pointe vers la balise courante, c'est-à-dire qu'elle représente <a>. Le point qui relie "this" à "target" a pour but de désigner cet attribut comme appartenant à l'objet courant (soit ici, la balise <a>).

La deuxième instruction "this.submit" engendre une action. En fait, elle exécute la balise <a> et donc elle tente de charger l'adresse indiquée par "href". Comme cette instruction est exécutée après l'attribution de la valeur "_blank" à "target", l'adresse sera chargée dans une nouvelle fenêtre.

Enfin, ce bloc d'instructions se termine par "return false". En fait, cette instruction a pour fonction d'interrompre l'exécution normale de la balise <a>. En effet, lorsque vous cliquez sur la balise <a>, vous déclenché l'évènement "onclick". Celui-ci exécute le bloc d'instructions que nous avons spécifié. Mais, une fois que ce bloc est terminé, le processus enclenché par le clic continue son bonhomme de chemin et <a> poursuit son exécution normale. Pour interrompre cette exécution, il faut que "onclick" renvoit une valeur de retour ("return") équivalente à faux ("false").

Si cette dernière instruction manquait, nous aurions le résultat suivant : l'url spécifiée par "href" serait chargée dans une nouvelle fenêtre (grâce au bloc d'instructions de l'évènement "onclick") et elle serait également chargée dans la fenêtre courante.

Maintenant, si Javascript a été désactivé, le bloc d'instructions attribuées à "onclick" ne serait pas exécuté et l'url spécifiée par "href" serait chargée normalement dans la fenêtre courante.

Bon amusement !