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 th

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

Strictly speaking, there's no such thing as a "visited" state for individual links. It's the URLs themselves that are interpreted as "visited" by the browser. Any links that point at a URL in the browser's history will receive styling as defined by the :visited pseudo-style in your CSS.

You could try to fake it by setting the location of a hidden iframe to the desired URL, but that won't force the current page to re-draw so I doubt you'd see the :visited style updates w/o a refresh.

For the 2nd part of your question, I'd probably go with Jordan Jones' answer.

Answer 3

Is there a way to determine the browser's a:visited styling?

I would say yes since the current document is visited and you can find it's link color like this:-

alert(mys_getLinkColor(top.location))


function mys_getLinkColor(href) {
var x, body, res=''
x = document.createElement('a')
x.href = href
body = document.getElementsByTagName('body')[0]
body.appendChild(x)
if(x.currentStyle) {
   res = x.currentStyle.color
}
else if(window.getComputedStyle) {
   res = window.getComputedStyle(x,null).color
}
return mys_rgbToHexColor(res) }


function mys_rgbToHexColor(v) { 
// E.g. 'rgb(5,2,11)' converts to "#05020b". All other formats returned unchanged.
var i
v = v.split('(')
if(!v[1]) return v[0]
v = v[1].replace(/ /g, '').replace(/\)/, '')
v = v.split(',')
for(i=0; i<v.length; i++) {
   v[i] = Number(v[i]).toString(16)
   if(v[i].length==1) v[i] = '0' + v[i]
}
return '#'+v.join('')}

Answer 4

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 5

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