JavaScriptではテキストの状態を取得・操作する各種プロパティやメソッドがありますが、その中のひとつにテキストの色を操作するものがあります。
このcss(name)を<a>タグに使ってみるとどうなるかというと、リンク先を訪問済の場合と未訪問の場合で違う色が返ってくるわけです。
さて、Livedoor ad4Uというサービスがありますが、このサービスは上記を利用して訪問履歴を調べています。
http://ad4u.drecom.co.jp/
http://www.drecom.co.jp/pr/release/20080711/
http://takagi-hiromitsu.jp/diary/20081211.html
一方、最初にこの手法を発見した人はエントリを削除してしまいました。
http://www.kenjiroumatsushita.com/archives/188.html
倫理的にどうかはともかく実装は簡単なのでやってみます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<html><head>
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
a{color:#f0f0f0}
a:visited{color:#0f0f0f}
</style>
<script src="./jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function check(){
var str="あなたはgoogleを訪れたことがありま";
var htmlStr1 = $("#google").css("color");
if(htmlStr1=="#f0f0f0"){
str += "せん";
}else{
str += "す";
}
str += "<br />あなたはyahooを訪れたことがありま";
var htmlStr2 = $("#yahoo").css("color");
if(htmlStr2=="#f0f0f0"){
str += "せん";
}else{
str += "す";
}
$("#disp").html(str);
}
</script>
</head>
<body onLoad='check()'>
<div id="check" style="display:none;">
<a href="http://www.google.co.jp/" id='google'>google</a><br />
<a href="http://www.yahoo.co.jp/" id='yahoo'>yahoo</a><br />
</div>
<div id="disp">
</div>
</body>
</html>
|
簡単かと思っていたら、何故かdocument.getElementById("google").style.colorで値が取得できませんでした。
color="#ffffff"と書くときちんと上書きできるのに何故なんでしょう？
仕方ないのでjQueryを使ってさくっと実装してみました。
まあ、外部スクリプトの助けを借りてはいますが、このように割と簡単に訪問履歴を取得できます。
あとはURLやIDをべた書きではなくforなどでぐるぐる回して取得し、その値をAJAXでサーバに送れば、Livedoor ad4Uのようなものもできるでしょう。
というわけでせっかくなので実演してみました。
下のリンクにマウスカーソルを合わせるとそのサイトに行ったことがあるかどうかが表示されます。
履歴の保存などは行っていないのでご安心を。
そもそもGoogleとYahooだけだから保存してもしょうがないというのもありますが。
<body>中にスクリプトやCSSを書いているので一部厳格なブラウザでは動かないかもしれません。
さて、このように訪問履歴を取得することはバグという扱いだそうなので、そのうち使えなくなるかもしれません。
それにしてもこういう広告手段、jQueryでも普通に実装されているようにまったくもって新しい技術ではないのですが、それらを使用して新しい手法を考え出すというアイデアは素晴らしいですね。
XSSを利用してフィッシングにも使えそうな悪寒。
すでに解決されているやもしれませんが，
>簡単かと思っていたら、何故かdocument.getElementById("google").style.colorで値が取得できませんでした。
color="#ffffff"と書くときちんと上書きできるのに何故なんでしょう？
これはDOMにスタイルシートが含まれないからです．
HTMLElement.prototype.styleはHTMLのstyle属性を取得・設定します．
こちらの記事のソースでしたら
<a href="http://www.google.co.jp/" id="google" style="color:#f0f0f0">google</a>
となっておりましたら
document.getElementById('google').style.color
は
'#f0f0f0'
を返します．
スタイルシートのスタイルをJSで取得するにはと言いますと．
（当該要素がelementに入っているとして）
１）IEでは，element.currentStyleがこれを持っています．
２）Safariでは，document.defaultView.getComputedStyle(element)がこれを持っています．
３）FirefoxとOperaとでは，window.getComputedStyle(element, '')がこれを持っています．また，これらでは，window==document.defaultViewです．
→var style = element.currentStyle || document.defaultView.getComputedStyle(element)でelementのスタイル情報が取得できます．（この方法ではstyle属性のスタイル諸共すべてのスタイル情報を取得します．）
ただし，style.colorの値１つ取ってもブラウザごとに差異があります．
http://d.hatena.ne.jp/uupaa/20080928/1222543331
ここが参考になると思います．
以上，コメ欄汚し失礼いたしました．