replicating wtikay - IE - currentStyle doesn't update when it ought to
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 开发者_JS百科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.
For the record: to make this work in IE, you have to replace the <a> element with an entirely new one, every time you want it to notice a change in the href, and the new element must be added to the document.
This is the case in 6, 7, and 8; I haven't tried the v9 betas.
window.onload = function()
{
var testlink;
var results = document.getElementById("results");
var container = document.getElementById("container");
var report = "";
testlink = document.createElement("a");
testlink.href = "ftp://";
container.appendChild(testlink);
report += " -" + (testlink.currentStyle || window.getComputedStyle(testlink, "")).color;
container.removeChild(testlink);
testlink = document.createElement("a");
testlink.href = "http://www.google.com/";
container.appendChild(testlink);
report += " +" + (testlink.currentStyle || window.getComputedStyle(testlink, "")).color;
results.appendChild(document.createTextNode(report));
};
加载中,请稍侯......
精彩评论