设置 href 属性会替换链接的文本答案

【问题标题】：Setting the href attribute replaces the text of the link设置 href 属性会替换链接的文本
【发布时间】：2011-11-25 13:50:01
【问题描述】：

编辑：我不是在谈论状态栏显示，我是在谈论您单击以跟随链接的文本。 /编辑

我浏览了一些类似的帖子，但没有找到答案。我有一个想要显示的链接。

www.mylink.com

我希望每次点击链接时链接的href都会改变。

href="www.mylink.com?R=340978"

每次点击后查询字符串都会变为一个随机数，以防止浏览器缓存页面。预计该页面会经常更改并经常查看以评估这些更改。

所以我希望人们看到“www.mylink.com”但指向“www.mylink.com?R=34532”的链接我想我可以通过一个附加新随机数的 onclick 事件来实现这一点并将 href 属性设置为新链接，但这也会更改显示的文本。

<script type="text/javascript">

var baseLink = "http://myDevLink/library/ea26098f-89d1-4305-9f75-afc7937f8336/25/test/036b602b-0bde-e011-957b-1cc1dee8bacd.html";
var link = "";

// Prime the link
$(document).ready(function() 
{
    NewRandomParam();
});

function NewRandomParam()
{
    // Make sure one of the warning messages isn't displayed instead of the link        
    if (document.getElementById("link") != null) 
    {
        // Add a random number param to the query string to prevent the user from opening a cached version of the page
        link = baseLink + "?R=" + Math.floor(Math.random() * 1000000);
        document.getElementById("link").setAttribute("href", link);
    }
}

</script>

<body>

<div id="divContent" style="display:inline; border:0px" class="tab">
<pre style="margin-top: 0;" >
<font face="tahoma">
<a href="" id="link" onclick=NewRandomParam(); target="_blank">http://myDevLink/library/ea26098f-89d1-4305-9f75-afc7937f8336/25/test/036b602b-0bde-e011-957b-1cc1dee8bacd.html</a>
</font>
</pre>
</div>

</body>
</html>

从上面的代码可以看出，没有关于应该显示什么的查询字符串，但是当我查看页面时，href 的值与查询字符串一起显示。如果我查看源代码，则正确的 url 在那里并且应该显示，但它不是。

请告诉我我在哪里愚蠢。

【问题讨论】：

标签： javascript jquery html href

【解决方案1】：

解决方案是结合此处建议的内容以及必须将链接文本重置为我想要的内容。这是有效的。

<script type="text/javascript">

var baseLink = "<%= this.link %>";
var link = "";

$(document).ready(function () 
{
    // Add a timestamp param to the query string to prevent the user from opening a cached version of the page
    $('#link').mouseenter(function () 
    {
        var date = new Date();
        link = baseLink + "?Timestamp=" + date.getTime();
        $("#link").attr("href", link);
        $("#link").text(baseLink);
    });

});

</script>

谢谢大家。

【讨论】：

经过一番思考，我认为更好的方法是在链接上使用 preventdefault ，然后在点击处理程序上运行执行上述操作的函数。我的测试表明，在正常单击时更改 href 属性还不够快，因此在新页面加载之前链接不会更改，这就是我尝试使用 mouseenter 的原因，但我认为使用带有 preventdefault 的 click 事件会更好，但如果它有效，它就有效，而且它可能不是一个问题，只是说;-)
点击时将其更改为下一次点击而不是当前点击。我更喜欢这种方式，但在页面加载之前，我会用第一个随机数初始化链接。您将单击并转到该链接，然后它会生成一个新链接。

【解决方案2】：

随机数在这里不是一个好主意。总是有机会得到一个重复的号码。只需使用date.getTime()，它应该足够“随机”满足您的目的。

更改 href 不应更改链接中的文本。它们有时是相同的文本，但这是通过将相同的信息放在两个位置（在 href 属性内）和作为 <a>linkname</a> 标记本身内的文本。改变一个永远不会影响另一个，除非你有一些其他的代码来保持同步。

如果您想更改链接悬停时窗口状态栏中显示的内容，祝您好运。大多数浏览器一开始就有防止这种摆弄的机制，因为更改状态栏文本被垃圾邮件发送者和诈骗者严重滥用。

【讨论】：

我想我更喜欢使用日期。感谢您的建议。我对更改href也有同样的想法，但这显然正在发生。我没有其他可以同步两者的代码。我上面展示的几乎是页面上的所有代码。此页面的唯一目的是在 CRM 页面上的 iFrame 中显示该 URL。状态消息不是我想要改变的。请参阅我对以下答案的评论。

【解决方案3】：

<script type="text/javascript">
   $(document).ready(function() {

      var baseLink = "http://myDevLink/library/ea26098f-89d1-4305-9f75-afc7937f8336/25/test/036b602b-0bde-e011-957b-1cc1dee8bacd.html";
      var link = "";

      $('#link').mouseenter(function() {
         link = baseLink + "?R=" + Math.floor(Math.random() * 1000000);
         $("#link").attr("href", link);
      });
   });
</script>

【讨论】：

这是一个改进，当页面第一次加载时，链接在没有查询字符串参数的情况下正确显示，但是当你第一次将鼠标悬停在它上面时，会出现查询字符串。
我认为我没有真正理解这个问题，当悬停链接时查询字符串不应该显示在屏幕上，我看到你找到了答案，但仍然不明白为什么要更改 href属性会更改您系统上的链接文本，因为它不应该这样做，并且在我的测试中，更改 hret 属性后无需更改文本，一定是某个地方的奇怪错误。
我也不是很明白，因为我认为更改 href 也不会更改文本。