I am trying to replicate, with my own code, the history-sniffing demo seen on http://wtikay.com/ and various other places. (It's a long story.)
I have something that works reliably in most older browsers (latest Safari and Chrome releases and Firefox 4 betas have a defense) -- but it doesn't work in IE7 or 8 (haven't tried 6), and I cannot figure out why. It seems to be that IE just isn't bothering to update its rendering when I change the href
property on an a
element -- but as far as I can tell, that's exactly what wtikay does, and it works.
Test file:
<!doctype html>
<html><head>
<title>gevalt</title>
<style>
body { background-color: gray }
a:link { text-decoration: none; color: black }
a:visited { color: white }
</style>
<body>
<span id="container"><a href="" id="testlink">test</a></span>
<a href="ftp://">minus</a>
<a href="http://www.google.com/">plus</a>
<script>
window.onload = function()
{
var testlink = document.getElementById("testlink");
var results = document.getElementById("results");
var container = document.getElementById("container");
var report = "";
testlink.href = "ftp://";
container.removeChild(testlink);
container.appendChild(testlink);
report += " -" + (testlink.currentStyle || window.getComputedStyle(testlink, "")).color;
testlink.href = "http://www.google.com/";
container.removeChild(testlink);
container.appendChild(testlink);
report += " +" + (testlink.currentStyle || window.getComputedStyle(testlink, "")).color;
results.appendChild(document.createTextNode(report));
};
</script>
<pre id="results">
</pre>
</body></html>
In a browser where it works, the words "test" and "plus" will be white (assuming you have visited www.google.com in that browser), the word "minus" will be black, and it will print something like "-rgb(0,0,0) +rgb(255,255,255)
" underneath. In IE, "test" will be black instead of white, and underneath it will read "-black +black
". Or possibly "test" will be white but underneath it will read "-white +white
". Both those are failures.
Any help would be most appreciated.