Entry
How can I check whether a link has been visited?
Jan 12th, 2005 09:50
Martin Honnen,
I don't think the W3C DOM provides a method or property to check whether
a link has been visited but the following attempt to check that status
works here for me with Netscape 7.2, Firefox 1.0, Opera 7.50:
Using getComputedStyle I store the current color of the link, then I
change the href of the link to window.location.href, store the color
getComputedStyle returns now, reset the href of the link and return the
result of comparing the old color with the new. If both are the same
then the link should have been visited (as obiously window.location.href
is currently being visited).
The same strategy with IE 6 using currentStyle instead of
getComputedStyle however fails, it seems IE doesn't change the color
when the script changes the href.
For older browsers like Netscape 4 the status is returned as 'unknown'
as getComputedStyle is not supported.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>checking the visited status of a link</title>
<script type="text/javascript">
function getComputedColor (element) {
var defaultView;
if ((defaultView = document.defaultView) &&
defaultView.getComputedStyle) {
return defaultView.getComputedStyle(element,
'').getPropertyValue('color');
}
else if (element.currentStyle) {
return element.currentStyle.color;
}
else {
return '';
}
}
function checkVisited (link) {
var oldHref, oldColor, newColor;
oldColor = getComputedColor(link);
if (oldColor) {
oldHref = link.href;
link.href = location.href;
newColor = getComputedColor(link);
link.href = oldHref;
return newColor == oldColor;
}
else {
return 'unknown';
}
}
</script>
<script type="text/javascript">
function makeTestLink (url, text) {
document.write('<a href="' + url + '">' + text + '<\/a>');
}
function checkLink (link) {
var visitedStatus = checkVisited(link);
var result = 'Checking link with href: "' + link.href + '": ';
result += 'visited: ' + visitedStatus;
document.forms.gui.elements.output.value += result + '\r\n';
}
function checkAllLinks () {
document.forms.gui.elements.output.value = '';
for (var i = 0; i < document.links.length; i++) {
checkLink(document.links[i]);
}
}
window.onload = function (evt) {
checkAllLinks();
};
</script>
</head>
<body>
<h1>Checking the visited status of a link</h1>
<div>
Some links:
<ul>
<li><a href="http://javascript.faqts.com/">JavaScript.FAQTS</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li>
<script type="text/javascript">
makeTestLink(location.href, 'This page');
</script>
</li>
<li>
<script type="text/javascript">
makeTestLink('http://example.com/testLink' + new Date().getTime(),
'Link made up now.');
</script>
</li>
</ul>
</div>
<form name="gui" action="" onsubmit="return false;">
<div>
<input type="button" value="check links"
onclick="checkAllLinks();">
</div>
<div>
<label>
output:
<br>
<textarea name="output" rows="20" cols="80"></textarea>
</label>
</div>
</form>
</body>
</html>
