Invocation de l'attribut HREF d'un lien avec javascript à l'aide de javascript!

Question

Je n'ai jamais vu ça auparavant mais vous pouvez invoquer l'attribut HREF d'un lien en utilisant javascript si le HREF contient javascript:; // code ......;

Sur mon exemple ci-dessous, cliquez sur les deux liens. ils font la même chose même s'ils ont un javascript différent dans le HREF.

par exemple:

 <script type="text/javascript"> 
      function clickme() 
      { 
       var link = document.getElementById("clickme"); 
       eval(link.href); 
      } 
    </script> 
    <a id="clickme" href="javascript:alert('hello');">I will alert hello</a> 
    <br /> 
    <a href="javascript:clickme()">click me</a> 

J'ai testé cela sur IE8, Firefox 3.6.8, Safari 5.0.1 et Chrome 6.0.472.55. Est-ce normalisé, donc je n'aurai pas à m'inquiéter de la dépréciation de cette fonctionnalité à l'avenir?

Answer 1

Vous n'avez pas à vous inquiéter d'être obsolète dans le futur. C'est une mauvaise idée maintenant. Ce qui se passe vraiment là-bas est ceci: Il y a un lien utilisant le protocole javascript:, qui est respecté par les navigateurs. Cela signifie que tout ce qui suit le javascript: est JavaScript et devrait être exécuté par l'interpréteur JS.

Lorsque vous récupérez le fichier href de la liaison, vous le recevez sous forme de chaîne, par ex. "javascript: clickme()". Vous pouvez utiliser eval sur les chaînes pour exécuter JavaScript. Maintenant, vous penseriez que cela échouerait (à cause du protocole javascript: au début), mais ce n'est pas le cas, car JavaScript a étiquettes et cela ressemble à une étiquette lorsque vous le traitez comme du code JavaScript. Donc ça marche, mais c'est une mauvaise idée. Il est également interdit (à cause du eval) dans le nouveau mode "strict" de la dernière version de JavaScript, ECMAScript 5th edition.

En général, quand nous pensons que nous devons utiliser eval pour quelque chose, cela indique qu'il y a un problème avec notre code et que certains refactoring sont en ordre. Les exceptions à cette règle sont des cas très marginaux que la plupart d'entre nous ne rencontreront jamais. Dans ce cas, plutôt que d'avoir l'attribut href qui contient le code que nous voulons exécuter, il faut juste utiliser le code que nous voulons exécuter. Votre exemple, par exemple, a une fonction clickMe comme seule chose utilisée. Plutôt que eval il, nous devrions simplement appeler cette fonction directement.

Answer 2

Je pense que votre question est de savoir si la ligne

eval(link.href); 

est valide.

La réponse à cela est oui, c'est. Il n'y a aucune raison que vous ne puissiez pas évaluer le code stocké dans une propriété, de la même manière que vous pouvez évaluer le contenu d'une zone de saisie. Cela dit, cela ressemble à un très mauvais moyen de coder les choses. Si vous ne faites pas attention, vous pourriez vous retrouver dans une boucle circulaire. De plus, un code comme celui-ci sera très difficile à maintenir.

Answer 3

Il ne sera pas obsolète mais je ne vois pas l'utilisation de celui-ci.

Si vous souhaitez ligne diffuser ce plus faire:

<script type="text/javascript"> 
      function clickme() 
      { 
       clicked(); 
      } 
      function clicked() 
      { 
       alert("hello"); 
      } 

    </script> 
<a id="clickme" href="javascript:clicked();">I will alert hello</a> 
<br /> 
<a href="javascript:clickme()">click me</a> 

Ou mieux encore faire:

<a href="#" onclick="clicked();">Click Me</a> 

Ou encore mieux:

<span onclick="clicked();" class="MakeMeLookLIkeLInk">Click Me</a> 

contrôles d'ancrage sont principalement utilisés pour la navigation, et comme une bonne pratique pour le garder comme ça. Si vous avez des fonctionnalités qui doivent avoir lieu, utilisez un span/div avec un onclick. Vous pouvez également utiliser un bouton.