Web Artisan Blog - ウェブ アルチザン ブログ

JavaScriptでアンカータグのhref属性を変更するとIEでリンクテキストが壊れる件

JavaScript・XHTML・CSS

2005年12月22日

アフィリエイトから企業サイト分析まで。訪問者の動きがまるわかりのアクセス解析サービス「リサーチアルチザンプロ」

LINEやSkypeみたいなビデオ通話がブラウザだけでできる!オンライン通話サービス「EZ-Interview - イージーインタビュー」

Research Artisanでは、外部リンクのクリック数を測定する、
”クリック測定”機能があります。
>クリック測定でアフィリエイトを成功に導くアクセス解析ツール「Research Artisan - リサーチアルチザン」

これを実現するに当たり、結構試行錯誤してたんですが、
Research Artisan公開当初は、以下のようなやり方で実現してました。
※今は別の方法で実現してます。
【仕様】
アンカーがクリックされた時に、そのアンカータグのhref属性を、
Research Artisanクリック測定用URIに書き換え、
書き換えたURI側でデータ登録し、書きかえる以前のURIにリダイレクトさせる。

【書き換える部分のJavaScriptサンプル】

//onclickイベント
document.onclick = function(e) {
 //IE,Opera
 if (document.all) {
  //imgタグの場合のhref取得
  if (window.event.srcElement.tagName.toLowerCase() == 'img') {
   uri = window.event.srcElement.parentElement.href;
   window.event.srcElement.parentElement.href = クリック測定用URI?書き換える前URI=uri;
  //aタグの場合のhref取得
  }
  if (window.event.srcElement.tagName.toLowerCase() == 'a') {
   uri = window.event.srcElement.href;
   window.event.srcElement.href = クリック測定用URI?書き換える前URI=uri;
  }
 }
 //Firefox,NetScape
 else if (document.getElementById) {
  if (e.target.href != '') {
   uri = e.target.href;
   e.target.href = クリック測定用URI?書き換える前URI=uri;
  }
  if (e.target.parentNode.href != '') {
   uri = e.target.parentNode.href;
   e.target.parentNode.href = クリック測定用URI?書き換える前URI=uri;
  }
 }
 return true;
}



やり方的にどうか?という疑問も持ちつつ、
思うように動作してくれて喜んでいたのですが、
たま〜に、IEで外部リンクをクリックすると、
一瞬、その外部リンクのリンクテキストに、
クリック測定用URIが表示されて、リンク先に遷移するという現象が起きてました。
測定自体は正常に行われるのですが、
一瞬表示が変わるので、クリックした人間は「何?」って思うでしょう。

(例)
<a href="http://www.google.co.jp">Google</a>
を、上記スクリプトで
<a href="クリック測定用URI?書き換える前のURI=http://www.google.co.jp">Google</a>
としたいのに、
<a href="クリック測定用URI?書き換える前のURI=http://www.google.co.jp">クリック測定用URI?書き換える前のURI=http://www.google.co.jp</a>
となってしまう現象でした。


で、途方に暮れていたら、
同じような現象に遭われていたようです。

アカラボ:javascript: link.href を変更するとリンクテキストが壊れます
javascript で ドキュメント内にある link (aタグ) の href を書き換えようと思っていろいろやっていたときに不思議な挙動(不具合?)を見つけたのでメモ。


FireFoxなんかで発生しないなど、全く同じですね。
「@」マーク混じりかは詰めきれていませんが、
確かに、半角英数字記号入りのリンクテキストで見事に壊れてました。

ということで、もしlink.hrefをセットするスクリプトを実行しているなら、直後にlink.innerTextやlink.innerHTMLの再設定もお忘れなく。というか、忘れないように<自分。


私も忘れないようにしておこ。

まあ、IEのバグでしょう。
ってか、こんな事する人、あんまいないか。

とにかく、こっちのロジックミスではない?ようで、
ホッとしたのでありました。

Web面接に最適。ブラウザだけでビデオ/音声通話ができるオンライン通話サービス。「EZ-Interview - イージーインタビュー」
訪問者録画機能も付いたシンプルで高機能なリアルタイムアクセス解析「リサーチアルチザンプロ」