IE7 - visited links revert to unvisted after page refresh

Question

Hello,

A number of our users have just upgraded from IE6 to IE7. the upgreaded users are reporting an issue with visited links reverting to their unvisited color after a page refresh. This only happens to links that are using javascript instead of a hard coded URL:

<script lang="JavaScript">
<!--
 function LoadGoogle()
 {
  var LoadGoogle = window.open('http://www.google.com');
 }
-->
</script>

<a href="javascript:LoadGoogle()">Google using javascript</a>
<a href="#" OnClick="javascript:LoadGoogle()">Google using javascript OnClick</a>

The above links will revert back to the unvisited color whenever the page is refreshed. It doesn't matter if the page is refreshed because of a post back, manually hitting the refresh or f5 button, or from an auto-refresh function. Please note, the above code is an over simplification of what is actually happening, but I believe it illustrates the issue well enough.

This is causing a problem for our users because we are providing them with a list of items that are all opened into new windows via javascript when they are clicked; and refresh the parent page when the users are finished with them. Each time the parent page is refreshed all of these links revert back to their unvisited color, so our users are losing track of which items they've worked on.

I've been digging around and it looks like this is intended behavior. IE7 doesn't register these links with the browsers history. Does anyone know a work around that will allow us to keep these javascript links in the visited state without having to do a major overhaul of the apps code?

Thank you.

Answer 1

Interesting, I've never run into this issue before but it makes sense.

Possible workarounds (I can't test them right now so I just have to throw them here for you to try out if you want to):

• Use unique hashes: <a href="#JavaScriptLoadGoogle" onClick="...

  Maybe this is enough for IE to make this link permanently "visited": It is a valid location. (There doesn't have to exist an actual anchor of that name in the page.)

• If this an application that requires JS, you could just put that will be visited into the href attribute:

  <a href='http://www.google.com' 
     onclick='LoadGoogle(); return false;'>  
  <!-- You don't need the Javascript: prefix here -->
  

  I'm not sure whether this method will register the URL as visited, though, because we're returning false in the click event.

Maybe one of these fixes it.

Answer 2

You can't really expect a javascript: URL to maintain visited/unvisited state. They're not real locations, they're commands to the browser to execute in the current document.

javascript: URLs should also never be used.

<a href="javascript:LoadGoogle()">Google using javascript</a>

This is a total disaster for accessibility and usability. And usually for SEO reasons too, though for an internal app that wouldn't matter (and possibly Google are doing alright with their SEO without your help. ;-))

<a href="#" OnClick="javascript:LoadGoogle()">Google using javascript OnClick</a>

This is still bad for the same reasons, plus you've forgotten to return false in the click handler, so the page scrolls to the top, and the javascript: at the start of the event handler is meaningless as it's not a URL. (In this context, javascript: is taken as a line label, which is an almost-totally-pointless language feature that no-one ever really uses.)

This is the kind of markup you'd want:

<a href="http://www.google.com/" onclick="window.open(this); return false;">Google proper link</a>

(In reality you'd probably unobtrusive-script that rather than include the onclick attribute.)

This would work on all devices, JavaScript available or not, visual browser or not, it'll show the proper link in the status bar, and it'll allow the user to use all their normal browser tools like middle-click-for-new-tab or right-click-bookmark-link on the link without getting the same page, a blank page or an error instead.

Naturally, it will also correctly reflect the visited/unvisited state of the target page itself, which is much more likely to be accurate than a spurious javascript: pseudo-URL. Pointing the href attribute to an actual location that has really been visited is the only reliable way to get :visited rendering.