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

Question

当我使用 JavaScript 更新链接时

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

无论新 URL 地址的状态如何，已访问/未访问链接的颜色主题都会持续存在。

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

进一步说明:

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

上面的例子是在 jQuery 中，但问题与普通 JavaScript 是一样的，即 document.getElementById和setAttribute .

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

编辑:

最小(非)工作示例(作者:Joeytje50):http://jsfiddle.net/3pdVW/

Answer 1

明确答案

要解决此问题，您只需完全删除 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 .