使用 javascript 调用带有 javascript 的链接的 HREF 属性！

Question

我以前从未见过这种情况，但如果 HREF 包含 javascript:;//code......;

在下面的示例中，单击两个链接。即使他们在 HREF 中有不同的 javascript，他们也会做同样的事情。

例如：

     <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>

我在 IE8、Firefox 3.6.8、Safari 5.0.1 和 Chrome 6.0.472.55 上对此进行了测试。这是标准化的，所以我不必担心将来会弃用此功能吗？

Answer 1

您不必担心它将来会被弃用。 现在是个坏主意。

真正发生的事情是：有一个使用javascript: 协议的链接，该协议受到浏览器的尊重。也就是说javascript:后面的都是JavaScript，应该由JS解释器来执行。

当您检索链接的 href 时，您会收到一个字符串，例如“javascript:clickme()”。您可以在字符串上使用 eval 来执行 JavaScript。现在，您会认为这会失败（因为前面的 javascript: 协议），但事实并非如此，因为 JavaScript 有 labels 并且当您对待它时它看起来像一个标签作为 JavaScript 代码。

所以它有效，但这是一个坏主意。在最新版本的 JavaScript，ECMAScript 第 5 版的新“严格”模式中，它也被禁止（因为 eval）。

一般来说，当我们认为需要使用eval 时，这表明我们的代码存在问题，需要进行一些重构。该规则的例外是我们大多数人永远不会遇到的非常边缘的边缘情况。在这种情况下，与其让href 属性包含我们想要执行的代码，不如使用我们想要执行的代码。例如，您的示例有一个 clickMe 函数作为唯一使用的东西。我们应该直接调用该函数，而不是evaling。

Answer 2

它不会被弃用，但我看不到它的用途。

如果您确实想简化此操作，请执行以下操作：

 <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>

或者更好：

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

甚至更好：

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

锚点控件主要用于导航，并作为一种很好的做法来保持这种状态。如果您有需要执行的功能，请使用带有 onclick 的 span/div。您也可以使用按钮。

Answer 3

我认为你的问题是是否行

eval(link.href);

有效。

答案是肯定的。没有理由不能评估存储在某个属性中的代码，就像评估输入框的内容一样。

也就是说，这看起来是一种非常糟糕的编码方式。如果你不小心，你可能会陷入一个循环。此外，这样的代码将很难维护。