J'ai vu le href suivant utilisé de temps en temps dans les pages Web. Cependant, je ne comprends pas ce que cela tente de faire ou la technique. Quelqu'un peut-il élaborer s'il vous plaît?

<a href="javascript:;"></a>
237
John Livermore 13 oct. 2011 à 17:46

10 réponses

Meilleure réponse

Un élément <a> n'est pas du code HTML valide sauf s'il possède un attribut href ou name.

Si vous voulez qu'il s'affiche correctement sous forme de lien (c'est-à-dire souligné, pointeur manuel, etc.), il ne le fera que s'il possède un attribut href.

Un code comme celui-ci est donc parfois utilisé comme moyen de créer un lien, mais sans avoir à fournir une URL réelle dans l'attribut href. Le développeur voulait évidemment que le lien lui-même ne fasse rien, et c'était la manière la plus simple qu'il connaissait.

Il a probablement un code d'événement javascript ailleurs qui est déclenché lorsque le lien est cliqué, et ce sera ce qu'il veut réellement se produire, mais il veut qu'il ressemble à un lien de balise <a> normal.

Certains développeurs utilisent href='#' dans le même but, mais cela fait que le navigateur saute en haut de la page, ce qui peut ne pas être souhaité. Et il ne pouvait pas simplement laisser le href vide, car href='' est un lien vers la page actuelle (c'est-à-dire qu'il provoque un rafraîchissement de la page).

Il y a des moyens de contourner ces choses. Utiliser un bit vide de code Javascript dans le href en fait partie, et bien que ce ne soit pas la meilleure solution, cela fonctionne.

236
Spudley 13 oct. 2011 à 13:55

Il est donc utilisé pour écrire des codes js à l'intérieur de href au lieu d'écouteurs d'événements comme onclick et éviter les liens # dans href pour rendre les balises a valides pour le html.

J'ai fait une recherche sur la façon d'utiliser javascript: à l'intérieur de l'attribut href.

<a href="
     javascript:
        a = 4;
        console.log(a++); 
        a += 2; 
        console.log(a++); 
        if(a < 6){ 
            console.log('a is lower than 6');
        } 
        else 
            console.log('a is greater than 6');
        function log(s){
            console.log(s);
        }
        log('function inplimentation working too');

">Click here</a>

Grâce à ce code, vous pouvez même y écrire des codes js au lieu d'appeler uniquement des fonctions.


Testé en version chrome 68.0.3440.106 (version officielle) (64 bits)

Testé dans Firefox Quantum 61.0.1 (64 bits)

2
Amir Fo 5 sept. 2018 à 08:30

La meilleure façon de toujours rendre un lien correctement est avec le CSS comme suit:

a {cursor: pointer !important}

Il faut éviter de suivre les choses inutiles comme mentionné dans le fil.

-3
Imran Nazir 20 févr. 2017 à 15:09

Ancien thread, mais je pensais simplement ajouter que la raison pour laquelle les développeurs utilisent cette construction n'est pas de créer un lien mort, mais parce que les URL javascript ne transmettent pas correctement les références à l'élément html actif.

Par exemple. handler_function(this.id) fonctionne comme onClick mais pas comme URL javascript.

Ainsi, c'est un choix entre écrire du code conforme aux normes pédantiquement qui vous oblige à ajuster manuellement l'appel pour chaque lien hypertexte, ou un code légèrement non standard qui peut être écrit une fois et utilisé partout.

3
16 mars 2015 à 00:00

C'est une façon de faire en sorte qu'un lien ne fasse absolument rien lorsqu'il est cliqué (sauf si des événements Javascript lui sont liés).

C'est une façon d'exécuter Javascript au lieu de suivre un lien:

<a href="Javascript: doStuff();">link</a>

Lorsqu'il n'y a pas réellement de javascript à exécuter (comme votre exemple), il ne fait rien.

8
Daan Wilmer 13 oct. 2011 à 13:49

Référez-vous à ceci:

<a href="Http://WWW.stackoverflow.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>
8
Alok 13 oct. 2014 à 05:26
<a href="javascript:void(0);"></a>

javascript: indique au navigateur qu'il va écrire du code javascript

4
Gowri 13 oct. 2011 à 13:49

Fondamentalement, au lieu d'utiliser le lien pour déplacer des pages (ou des ancres), l'utilisation de cette méthode lance une ou plusieurs fonctions javascript

<script>
function doSomething() {
  alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>

Cliquer sur le lien déclenchera l'alerte.

37
Eonasdan 13 oct. 2011 à 13:51
<a href="javascript:alert('Hello');"></a>

Est juste un raccourci pour:

<a href="" onclick="alert('Hello'); return false;"></a>
10
bjornd 13 oct. 2011 à 13:50

Il existe plusieurs mécanismes pour éviter qu'un lien n'atteigne sa destination. Celui de la question n'est pas très intuitif.

Une option plus propre consiste à utiliser href="#no"#no est une ancre non définie dans le document.

Vous pouvez utiliser un nom plus sémantique tel que #disable ou #action pour augmenter la lisibilité.

Avantages de l'approche:

  • Évite l'effet "se déplacer vers le haut" du href = "#" vide
  • Évite l'utilisation de javascript

Inconvénients:

  • Vous devez être sûr que le nom de l'ancre n'est pas utilisé dans le document.

Étant donné que l'élément <a> n'agit pas comme un lien, la meilleure option dans ces cas n'est pas d'utiliser un élément <a> mais un <div> et de fournir le style de lien souhaité.

30
Pau Giner 28 juil. 2014 à 19:45