Neo Inspiration

こんなエントリーがあったので
YahooカテゴリのリンクがIEとfirefoxでは違う
調べてみた。

状況確認

IEでみると
<a href=”http://www.searchengineoptimization.jp/” onmousedown=”return catrd(this,’&l=SIT&sid=2077584930&ssid=2076957840&loc=1&sig=1c4257cfbecbbc422d0d69bb26b0eac8&rd=’,”,’site’);”>SEO検索エンジン最適化</a>

Firefoxでみると
<a onmousedown=”" href=”http://dir.yahoo.co.jp/proc/?m=redir&l=SIT&sid=2077584930&ssid=2076957840&loc=1&sig=1c4257cfbecbbc422d0d69bb26b0eac8&rd=http%3A%2F%2Fwww.searchengineoptimization.jp%2F”>SEO検索エンジン最適化</a>

おお確かに違う

でもそういや似たようなこと俺もやったな。。

onmousedown って確か Javascriptの挙動の違いがあったきがしたなぁ。。
と思い出したんで、ちょっとテストしてみました。

このページでIEとFirefoxで　右クリックしてみてください。
テストページ

あれれ？

そう　Firefoxだと右クリで javascript が反応してないですね。；

ようはブラウザによってjavascript の挙動が違うので正確なクリックカウントができないじゃんということなんでしょうね。。
たぶん本当なら統一したほうがいいので、 firefoxバージョンでやるのがいいんだけど
SEOの効果がないとヤフカテが売りあげに影響がある・・

なんてことだったりしたら面白いですね！

というわけで、意図的にプログラム側で書き分けているっていうのが結論です。

おまけ

ちなみに　選択した部分のソースを表示ってやるのと、CTRL+U押すのとで、
結果が変わるのは、Firefoxの仕様で
取得したHTMLをDOMツリーに展開した後でその部分のソースを見てるからだそうです。
（CTRL+Uを押した時はDOMツリーに展開前のソースを表示させているということですね）

javascript で style.display したらフォーカスが消えました。

こんな感じのJSを作っていて

function clickable(){
　　　　document.getElementById(’hidden’).style.display = “none”;
　　　　document.getElementById(’visible’).style.display = “block”;
}

こんな感じのinput

<input type=text id=clickable onBlur=clickable() />

<input type=text id=hidden />
<input type=text id=visible />

みたいな設定になったときに
id=clickableでTABキーおすとフォーカスが消えます。
どこをクリックしてもフォーカスしません。（実際はしてるんだけどカーソルが見えない）

こんな感じ：テストHTML

たぶんhidden（描画しない設定）になったとこにフォーカスが当たってそっからでなくなる？
ような気がします。

描画しない display を 単に表示しない visiblity にすれば問題は解決するけど、
レイアウトの問題もあるので、display のままでなんとかならないかなーと試行錯誤したら
Tabを押したときに強制的にどっかをフォーカスするといいみたいです。

でもどっかフォーカスといって
document.getElementById(’visible’).focus();

ではだめみたいです。
処理の順番の関係かな。

この場合は
document.getElementById(’clickable’).focus();

を付け加えればうまくいきます。

ちょっとまえに直リンに変わって騒いでいたので
どうやってるのか気になったので見てみました。

これが実際のHTMLです。

<a href=”****” onmousedown=”return catrd(this,’&l=SIT&sid=2075187116&ssid=2076442857&loc=1&sig=0101cb926a7020f1c40d20a1169d8935&rd=’,”,’site’);”>*****

でこれがjsのソース

function catrd(o,r,f,t){
var pat=/:/;
var href=o.href;
var rbase=’http://srd.yahoo.co.jp/CAT’;
var cbase=’http://dir.yahoo.co.jp/proc/?m=redir’;
var tourl=href.replace(pat,’%3A’);
if(f!=”"){
f=’?frc=’+f
}
if(t!=”site”){
url=rbase+r+”*-”+tourl+f
}else{
var enc=encodeURIComponent?encodeURIComponent:escape;
url=cbase+r+enc(href)
}
o.href=url;
o.onmousedown=”";
return true
}

適当にコメントつけてみると

function catrd(o,r,f,t){
var pat=/:/; //正規表現のパターン代入
var href=o.href; リンクのhref属性を代入
var rbase=’http://srd.yahoo.co.jp/CAT’; //URL代入１
var cbase=’http://dir.yahoo.co.jp/proc/?m=redir’; //URL代入２
var tourl=href.replace(pat,’%3A’); //正規表現で:を%3Aに置き換え
if(f!=”"){//fがブランク以外の例がないのでよくわからんけど置き換えてる
f=’?frc=’+f
}
if(t!=”site”){//内部リンク系だったら
url=rbase+r+”*-”+tourl+f
}else{//外部リンク系だったら
var enc=encodeURIComponent?encodeURIComponent:escape; //encodeURIComponentが使えたら使う、使えなければescape
url=cbase+r+enc(href) //URIエンコードしてURL作成
}
o.href=url; //Aタグのhref属性を書き換え
o.onmousedown=”"; //onmouse属性を空っぽに
return true
}

こんなかんじかな。

ようはクリックしたら動的にURLを変えてカウントしてるだけですが。

これをちょいいじれば

//引数o:this r:クリックカウントのURIに渡したい引数
function test(o,r){
var u=’http://***’; //クリックカウントURI
var e=encodeURIComponent?encodeURIComponent:escape; //encodeURIComponentが使えたら使う、使えなければescape
h=u+r+e(o.href); //URIエンコードしてURL作成
o.href=h; //Aタグのhref属性を書き換え
o.onmousedown=”"; //onmouse属性を空っぽに
return true
}

こんなかんじにして
クリックカウントのファイルからURLに飛ばせれば自分で使えますね。
テストしてないのでエラーでるかも