CSS/JavaScript/взламывание: Обнаружьте: посещаемое моделирование на ссылке *без* проверка его непосредственно ИЛИ делает это быстрее, чем я
Это простой:
<area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#">
<area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#">4 ответа
[новое обновление]
Если вам нужны результаты только для визуального представления, то самым быстрым методом будет использование счетчика CSS.
CSS :
body{
counter-reset: visited_counter;
}
a:visited{
counter-increment: visited_counter;
}
#results:before{
content:counter(visited_counter);
}
Это добавит количество посещенных ссылок перед элементом с идентификатором "результаты".
К сожалению, получить к нему доступ из JavaScript невозможно, его можно только отобразить ..
[начальный ответ]
Вы знаете, что jQuery поддерживает селектор : loaded , верно?
Like $ ('a :hibited')
[update]
В качестве альтернативы вы можете применить свойство CSS, которое не зависит от getComputedStyle для получения ..
Как a: visit {height: 1px; display: block;} , а затем проверьте offsetHeight .
- добавить дочерний элемент внутри привязки (например, диапазон)
- использовать
цвет: наследовать - определить цвет дочернего элемента (JS)
предостережение: афайк это не будет работать на lte ie7
для lte ie7 вам необходимо
- добавить
видимость: скрытыйнаa: посещенныйивидимость: наследоватьна дочернем элементе - . видимость ребенка с помощью javascript (скрытый = посещенный)
Поскольку все версии IE (да, даже версия 8, если вы включаете причуды) поддерживают выражения CSS, свойство цвета по-прежнему небезопасно. Вы, вероятно, могли бы ускорить тестирование IE с помощью этого (непроверенного):
a:visited { color: expression( arrVisited.push(this.href) ); }
Кроме того, это действительно не относится к вашему вопросу, но вы, конечно, можете очень легко установить свойства в дочерних узлах, чтобы инициировать обнаружение, и любое решение должно предотвратить это тоже :
a.google:visited span { background-image: url(http://example.com/visited/google); }
Вам также необходимо защитить соседних братьев и сестер, а не только потомков:
a.google:visited + span { }
Также не тестировалось, но вы, вероятно, могли бы значительно ускорить работу, используя свойство content для изменения DOM, а затем некоторый XPath, чтобы найти новые узлы.
a.google:visited:before {content: "visited"; visibility: hidden;}
XPath:
visited links = document.evaluate('//a[text()="visited"]')
Похожая идея, но в обход .getComputedStyle () :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
a:visited { display: inline-block; font-family: monospace; }
body { font-family: sans-serif; }
</style>
<script type="text/javascript">
function test() {
var visited = document.getElementById("v").childNodes[1].firstChild.clientWidth;
var unvisited = document.getElementById("u").childNodes[1].firstChild.clientWidth;
var rows = document.getElementsByTagName("tr");
for (var i = 1, length = rows.length; i < length; i++) {
var row = rows[i];
var link = row.childNodes[1].firstChild;
var width = link.clientWidth;
row.firstChild.appendChild(document.createTextNode(link.href));
row.childNodes[2].appendChild(document.createTextNode(width === visited ? "yes" : (width === unvisited ? "no" : "unknown")));
}
}
</script>
</head>
<body onload="test()">
<table>
<tr><th>url</th><th>link</th><th>visited?</th></tr>
<tr id="u"><td></td><td><a href="http://invalid_host..mplx/">l</a></td><td></td>
<tr id="v"><td></td><td><a href="css-snoop.html">l</a></td><td></td>
<tr><td></td><td><a href="http://stackoverflow.com/">l</a></td><td></td>
<tr><td></td><td><a href="http://www.dell.com/">l</a></td><td></td>
</table>
</body>
</html>
Уловка, конечно же, заключается в том, чтобы гарантировать, что посещаемые и непосещенные ссылки имеют разную ширину (здесь, с помощью sans-serf vs. fonts) и установив для них встроенный блок , чтобы их ширина была доступна через clientWidth . Протестировано для работы с FF3.6, IE7, Chrome 4 и Opera 10.
В моих тестах доступ к clientWidth был постоянно быстрее, чем что-либо, основанное на вычисленных стилях (иногда на ~ 40%). %, но колеблется в широких пределах).
(Да, и извиняюсь за ерунду; прошло слишком много времени с тех пор, как я пытался проводить события в IE без фреймворка, и я устал бороться с этим .)