在Chrome下更改其href属性时更新链接的访问状态

Question

当我使用JavaScript更新链接时

$('#link_id').attr('href', some_new_url)

无论新网址的状态如何，访问/未访问链接的颜色主题都会保留。

有没有办法更改链接地址，强制浏览器重新检查其访问状态？

补充说明：

我（在OSX 10.8上）在Chrome（32）和Safari（6.1）中遇到此问题。在Firefox（26）中，链接状态会根据需要自动更新。

上面的示例是在jQuery中，但问题与使用vanilla JavaScript的问题相同，即document.getElementById和setAttribute。

（如果可能的话，我宁愿避免删除和添加<a></a>。）

编辑：

最小（非）工作示例（由Joeytje50提供）：http://jsfiddle.net/3pdVW/

Answer 1

您可以这样更改：

$('#link_id').replaceWith($('<a href="' + some_new_url +'">' + $('#link_id').text() + '</a>'));

它应该做的伎俩。经过测试：http://jsfiddle.net/maximgladkov/L3LMd/

Answer 2

明确答案

你可以做些什么来解决这个问题，只是强制浏览器通过完全删除href属性来重新计算样式，然后立即重新添加它。这将使浏览器首先计算样式，因为<a>不再是没有href的链接，然后您添加要提供的href。那么代码就是：

$('#link_id').removeAttr('href').prop('href', some_new_url);

Demo

PS：在这种情况下，使用.attr('href', some_new_url);可能会同样正常。

以前的尝试

我在想的是这是一个渲染故障。由于脚本，:visited状态发生更改时，不会重新计算样式。 This您的问题的最小示例显示了这一点。您可以尝试的是以下任一项：

使用元素的属性

问题可能在于您正在更改属性，而属性又会更改href属性。如果直接更改href属性，它可能会起作用。您可以通过jQuery.prop执行此操作，该代码将使用以下代码更改链接：

$('#link_id').prop('href', some_new_url);

Demo。我对这个问题的期望并不高，但值得一试。我怀疑会做得更好的是：

强制重新计算样式

如果要强制重新计算样式，只需更改要更新的最高元素上的类即可。由于您单独更新<a>元素，因此您需要以下内容：

$('#link_id').prop('href', some_new_url).toggleClass('webkit-force-recalculate');

Demo

我认为很有可能做到这一点。

---

如果这些方法都不适合您，您当然可以使用maximgladkov's solution。

Answer 3

经常遇到类似问题，例如当设置带边框的元素大小时，会留下杂散边框等。

虽然这不是直接相同，但我发现隐藏元素可以解决问题。没有遇到任何麻烦。

Simple fiddle

$("#change_link").on("click", function(e) {
    $("#anchor1").hide();
    $("#anchor1").attr('href', $("#url").val());
    $("#anchor1").show();
});

这会强制重绘元素。

Answer 4

我认为您可能正在寻找的是以下CSS代码：

a:link {
    text-decoration: none;
    color: #00F;
}
a:visited {
    color: #00F;
}