using javascript to mark a link as visited

Question

FF2 (at least) doesn't mark as link as :visited if it triggers the onclick handler without following the href. I'm using onclick to fetch data from a server and modify the page and the link styling seems appropriate here. But the link is not marked as visited.

Is there a cross-browser way to mark the link as visited? Failing that, is there a way to determine the browser's a:visited styling and apply it to the link?

Thanks to all who replied.

Looks like the answers are:

• Is there a cross-browser way to mark the link as visited?
  No, there's no way to do this. Links are identified as visited if the href is in the browser history.
• Is there a way to determine the browser's a:visited styling?
  No, not via javascript alone.

Answer 1

Here is how I did it. Only works in browsers that support HTML5 history api.

// store the current URL
current_url = window.location.href

// use replaceState to push a new entry into the browser's history
history.replaceState({},"",desired_url)

// use replaceState again to reset the URL
history.replaceState({},"",current_url)

Using replaceState means that the back button won't be affected.

Answer 2

The only workaround I know of would be something like the following.

Say, your visited links are red:

<a href="#" onclick="someEvent();this.style.color='#ff0000'">link</a>

But that doesn't mean that when the page is reloaded, the links are still marked visited.

To achieve this, I'd suggest give all links IDs, which are of course unique across your entire app, or namespaced per page. In your onclick, you'll trigger another method, which saves the link's ID to a cookie.

The most easiest would be a comma-separated list, which you can split() before reading. Which is what you do when the page is reloaded. When it's split, you iterate over all IDs and set the color on your links.

E.g, using jQuery:

// onclick
function saveID(id) {
  if ($.cookie('idCookie')) {
    $.cookie('idCookie', $.cookie('idCookie') + "," + id);
  } else {
    $.cookie('idCookie', id);
  }
}

// make all links colored
function setVisted() {
  var idArray = $.cookie('idCookie').split(',');
  for (var x=0; x<idArray.length; x++) {
    $('#' + idArray[x]).css('color', '#ff0000');
  }
}

// assign saveID()
$(document).ready(function(){
  $('a').click(function(){
    saveId($(this).attr('id'));
  });
  setVisited();
});

I haven't tested this code, but it should get you started and give you an idea. If you get lucky, it's paste and win. ;-) I also haven't researched how much you can store in a cookie and what the performance implications are, or what other restrictions apply, also see my comments.

Answer 3

Apply a class that has the same definition as :visited.