head_logo
 
google
technorati
delicious
slashdot
blinklist
furl
netvouz
mister wong
linkarena
linkarena
linkarena

 

CSS History Grabber
Freitag, den 29. Januar 2010 um 21:50 Uhr

css_history_kleinWäre es nicht schön beunruhigend, wenn man feststellen kann, ob unser Webseiten Besucher schonmal eine bestimmte Seite besucht hat? Dank ein bisschen Javascript und CSS ist dies sehr einfach möglich, wie wir gleich sehen werden. Wenn man ein wenig mehr Arbeit investiert, kann man das ganze auch ohne Javascript lösen. Dazu benutzt man einfach individuelle Styles für jeden Link und benutzt unterschiedliche Bilder als Hintergrund für die besuchten Links. Darüber sollte es dann möglich sein die gewünschten Informationen zu beziehen, ganz zur Not macht man dies über das Access-Log des Webservers.

 

Ohne große Reden hier ein Beispiel und hier der Code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" dir="ltr">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>CSS/JavaScript History Grabber</title>
 <style type="text/css">
 a:visited {
 color: #FF0000;
 }
 </style>
</head>
<body>

<div align="center">
<object><noscript>Please turn JavaScript on.</noscript></object>
</div>

<ul id="visited"><li><b>Visited</b></li></ul>
<ul id="notvisited"><li><b>Not Visited</b></li></ul>

<script type="text/javascript">
<!--


/* Define URLs */
var websites = [
 "http://twitter.com/",
 "http://www.youtube.com/",
 "http://www.myvideo.de/",
 "http://www.facebook.com/",
 "http://www.meinvz.de/",
 "http://www.meinvz.net/",
 "http://www.studivz.de/",
 "http://www.studivz.net/",
 "http://www.wer-kennt-wen.de/",
 "http://www.lokalisten.de/",
 "http://www.spd.de/",
 "http://www.cdu.de/",
 "http://www.gruene.de/",
 "http://www.fdp.de/",
 "http://www.piratenpartei.de/",
 "http://www.ebay.de/",
 "http://www.paypal.com/"
];

for (var i = 0; i < websites.length; i++) {
/* Create link to the checked URL */
 var link = document.createElement("a");
 link.id = "id" + i;
 link.href = websites[i];
 link.innerHTML = websites[i];

 /* Add link to the DOM */
 document.body.appendChild(link);

 /* Browser dependant color test */
 if (document.documentElement && document.defaultView) {        
 var color = document.defaultView.getComputedStyle(link,null).getPropertyValue("color");
 }
 else if(document.documentElement.currentStyle) {
 var color = document.getElementById("id" + i).currentStyle["color"];
 }

 /* remove link from the DOM */
 document.body.removeChild(link);

 /* check to see if the link has been visited if the computed color is red */
 if (color == "rgb(255, 0, 0)" || color == "#ff0000") {
 /* visited */
 var item = document.createElement('li');
 item.appendChild(link);
 document.getElementById('visited').appendChild(item);
 } else {
 /* not visited */
 var item = document.createElement('li');
 item.appendChild(link);
 document.getElementById('notvisited').appendChild(item);
 }
}

// -->
</script>

</body>
</html>
 

 

valid-html401button_hosted_by