21

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.
1

5 Answers 5

27

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.

3
3

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.

5
  • Thanks, this is useful for persisting the information. The part that I don't yet understand (and my browser knowledge is not deep or current) is how to get the styles that the browser wants to apply by default to :visited links. Back in the misty depths of time, at least, it was possible for users to configure their browser so that visited links appeared in a different color (for example, to deal with colorblindness issues). Rather than assume the color is red, I'd like to query the style info and apply that to my 'link' elements. But I don't know how to do that, or even if it's possible.
    – dougfelt
    Apr 28, 2009 at 0:26
  • Just a comment on my own answer. Maybe even a cookie per page makes sense. But beware of going crazy with this. I'm not sure if the visual achievement is worth it.
    – Till
    Apr 28, 2009 at 0:26
  • @Doug Just saw your other comment -- you want the browser defaults? I think in Firefox they are "hidden" in about:config. You can probably ready that with an extension, but not from a webpage (thank goodness). ;-)
    – Till
    Apr 28, 2009 at 0:30
  • For IE, check this: msdn.microsoft.com/en-us/library/aa741310.aspx You can always use the defaults and hope that the user didn't change them. Generally, consistent behaviour of one app is nice. If you adhere to defaults, you'll be save. It won't match a 100% though.
    – Till
    Apr 28, 2009 at 0:32
  • Wow it works nicely. This is one of high priority requirement for me. Many many thanks.
    – sura2k
    Oct 4, 2013 at 14:42
1

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

2
  • I'm letting the user's browser determine that definition. The last line of my question asks how to access the definition.
    – dougfelt
    Apr 27, 2009 at 23:20
  • Yes, sadly, I have a problem with not reading the whole question at times. Apr 27, 2009 at 23:32
1

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.

1
  • Hmmm, but I still don't know how to get that information. Guess I should ask this as a separate question.
    – dougfelt
    Apr 27, 2009 at 23:47
0

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('')}
1
  • 2
    Note that you can't do this any more - on the modern, secure browsers at least... This is due to the high profile CSS History Leak vulnerability. For more info on the problem and how it's fixed in FireFox, see blog.mozilla.com/security/2010/03/31/…
    – Day
    Dec 10, 2010 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.