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

Question

我以前从未见过这个，但如果 HREF 包含 javascript:;//code......; 则可以使用 javascript 调用链接的 HREF 属性。

在我下面的示例中，单击两个链接。尽管 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 有标签，看起来像当您将其视为 JavaScript 代码时的标签。

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

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

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

有效。

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

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